React-apollo: [Bug] `loading` doesn't change back to false if updateQuery doesn't mutate the store

[migueloller]

This is a continuation of apollostack/apollo-client#698.

@tmeasday,

I'm very low on time at the moment but I'll try to get a PR done in the next couple of days with the failing test case.

[tmeasday]

Thanks @migueloller. I may end up doing this myself, I'll let you know if so.

[davidyaha]

@migueloller @tmeasday Is there any known workaround?
It seems that returning a cloned object will not do the trick.

[migueloller]

@davidyaha, the way I got to work around it was by checking if the query variable existed and used that as a proxy for loading.

For example, if your top level query is named post then do post !== undefined to check if it has finished loading. This is far from ideal but it worked for me in the mean time while loading is fixed in apollo-client.

I would also recommend to assume that loading is of type ?boolean, as opposed to boolean. I've had a few issues because I assumed that loading would always be true or false but it is sometimes undefined.

[stretchkennedy]

We do

class Foo extends Component {
  constructor() {
    super();
    this.state = {
      hasRefetched: false,
      refetching: false,
    };
  }

  setRefetchingToFalse() {
    this.setState({ refetching: false });
  }

  fetchMore() {
    this.setState({ refetching: true, hasRefetched: true });
    this.props.data.fetchMore({
      // ...
    }).then(this.setRefetchingToFalse).catch(this.setRefetchingToFalse);
  }

  render() {
    const loading = this.state.hasRefetched ? this.state.refetching : this.props.data.loading;
    // ...
  }
}

It's not perfect by any means, and could have some nasty bugs with regards to loading state in other components, but it works for our use case.

[jbaxleyiii]

@migueloller can you try version 0.5.8?

[davidyaha]

@jbaxleyiii From what I see now, it is not changing into true when I use fetchMore. There is a new networkStatus variable instead?

[kojuka]

I'm also seeing this bug since updating to 0.5.8 - any work arounds?

[tmeasday]

Ok, I foolishly created a failing test and then realised it doesn't make sense any more: https://github.com/apollostack/react-apollo/tree/228-failing-test

[tmeasday]

@davidyaha you are correct on both counts. See https://github.com/apollostack/apollo-client/issues/707

[tmeasday]

@webular by "bug" do you mean the fact that it never goes loading when you fetchMore?

If so a "workaround"[1] is to use your own internal state, just as you would for mutations:

@graphql(...)
class Foo extends React {
  onFetchMore() {
     this.setState({ fetching: true });
     this.data.fetchMore(...)
        .then(() => this.setState({ fetching: false });
  }
}

We should document this better but I'm going to close this because this isn't really a bug any more.

[1] Arguably this behaviour is more correct than before, but we did take away a feature I guess ;)

[jasonmorita]

I am still having this issue. I see in the docs that loading is used to show <Loading />, but for me the component doesn't re-render during fetchMore and by the time it does re-render, loading is false

What am I doing wrong here? (assume my code is the same as the docs because that is what I used as a model)

[ramsaylanier]

👍 also still having this issue