Update to 0.2 breaks about fetch-hoc

[moimael]

Thanks ! That was it ! 0.3 fixed the issue for me.

[eliihen]

Thanks for the report - I'll look into it. Jump back to 0.1 in the mean time

[moimael]

@esphen Yeah already reverted to 0.1 and it works fine

[eliihen]

I tried to reproduce this today, but no luck. 0.2 seems to work fine in my tests. See this repo.

Can you please provide a minimal reproduction repo?

[bidanjun]

maybe here:{this.props.data ? JSON.stringify(this.props.data, null, 2) : 'no error' }
i use stateless component,and if simplely use {this.props.data},it will crash,and data is undefine.

[moimael]

Yes the problem seems to come from stateless components. I'm only using stateless component with fetch-hoc.

[eliihen]

Guys, rendering in a stateless component works fine for me.

import React from 'react';
import ReactDOM from 'react-dom';
import fetch from 'fetch-hoc';
import App from './App';

let FooComponent = props => {
  if (props.error) {
    return <div className="error">An error occured! {props.error.toString()}</div>;
  }
  if (props.loading) {
    return <div className="loading">Loading...</div>;
  }

  return (
    <code><pre>
      {JSON.stringify(props.data, null, 2)}
    </pre></code>
  );
}

FooComponent = fetch('http://httpbin.org/get')(FooComponent);

ReactDOM.render(<FooComponent />, document.getElementById('root'));

Can you please post a minimal reproducible case? A gist or something?

[eliihen]

I did some hacking, and may have an idea what your issue is. There was a change in the loading prop in 0.2.0 which changed its initial state to false. That change was not documented, that's my bad. I'll add it to the changelog.

Here's the loading states as present:

1. Object { loading: false, success: undefined, error: undefined }
2. Object { loading: true, success: undefined, error: undefined, response: undefined }
3. Object { loading: false, success: true, error: undefined, response: Response, data: {…} }

My theory is that you're throwing on step 1 because data is not yet assigned. Is this correct?

The reasoning behind changing step 1 to be loading=false is because it's has not actually started fetching yet, and if you pass a function like fetch(props => props.url || null), that should not enter a loading state if props.url is not defined.

I realize this makes the API harder to use, so I'll look into calculating initial loading state based on what is passed to fetch(). I think that is the most correct solution here.

[eliihen]

I released 0.3.0 with the above change, try it out