React-apollo: Query result not propagated to component (stuck in loading state).

[Panoplos]

Intended outcome:
I have several graphql HOC's, some that have dependencies on the results of others. In one particular case, the query is stuck in a loading state, even though the query has completed and the store updated.

Here is the query that is getting stuck.

const withServiceProvider = compose(
  graphql(ServiceProviderQuery,
    {
      name: 'serviceProvider',
      skip: ({account}) => !account || !account.serviceProvider,
      options: ({account}) => ({
        variables: {
          id: account.serviceProvider && account.serviceProvider.id
        }
      }),
      props: ({ serviceProvider }) => {
        const props = {
          serviceProvider: {
            ...flattenGraphQLProps('serviceProvider', serviceProvider)
          }
        }
        const sp = path(['serviceProvider'], serviceProvider)
        if (!sp) return props
        return {
          serviceProvider: {
            ...props.serviceProvider,
            viewId: spViewId(sp)
          }
        }
      }
    }
  ),
  setPropTypes({
    serviceProvider: PropTypes.object
  })
)

Here is the Component that is using it:

const ServiceProviderContainer = (props: Object): React$Component => {
  const { l10n, serviceProvider } = props
  return (
    <div id='service-provider-container'>
      <Header />
      {
        serviceProvider.loading ?
          <Loader />
        :
          serviceProvider.error ?
            <NotFound message={l10n.localise('sp-not-found', 'This service provider does not exist.')} />
          :
            <Route path='/service-provider/:id/:module?'>
              <ServiceProvider {...props} />
            </Route>
      }
    </div>
  )
}

I am composing the component with withServiceProvider in the same way I am doing with all my other components that use HOCs.

export default compose(
  withl10n('service-provider', resourceIds),
  withAccount,
  withServiceProvider,
  ...
)(ServiceProviderContainer)

Now, all is great...the loader shows, the query is executed and the results are serialized into the store,

and normally the component will receive the result. However...

Actual outcome:

As you can see below, the component is not getting the final result, and loading is never cleared.

Notes

1. I have confirmed that props is never called with a completed serviceProvider (i.e. data). It is called twice, each time with the same, as follows:

1. I use this method with many other components, with no issues, so it is really unclear why this one is failing. Any insight into how to debug this would be greatly appreciated.

Version

• [email protected]
• [email protected]

[makamekm]

The same with:
"apollo-client": "2.0.1"
"react-apollo": "2.0.0"

[tpinne]

Having exactly the same problem. But we have one component which behaves correctly even though it is programmed in the same way than the others.

A strange effect to add: The problem only occurs if I navigate between different pages which issue different GraphQL Queries.

No Problem when:
GQLPage -> NonGQLPage -> GQLPage -> NonGQLPage -> GQLPage ...

Problem when:
GQLPage -> OtherGQLPage -> GQLPage -> OtherGQLPage -> GQLPage ...
The first call to each page behaves correctly. All subsequent calls are stuck in loading state. FetchPolicy is set to network-only everywhere.

[bckellerman-soltech]

I am also having only queries on a single page of my application stuck in loading like @tpinne. The initial query works every time, but on navigation to a new route with a graphql query, and then returning to the previous page with the offending components, those components are stuck in a loading state. I do see the subsequent queries being fired in the network tab, and valid results coming back, but the components are never receiving that data.

On the page this issue is happening on though, there is one query that is working and the others aren't. The only difference between the two is that the working query takes no variables.

This is happening on:
"react-apollo": "1.4.16"
"apollo-client": "1.9.3"

[bckellerman-soltech]

After searching more this weekend I found this issue in apollo-client. It looks like the issue is fixed for the client in 2.0, but until doing an upgrade the only fix/hack around this is to put { options: { notifyOnNetworkStatusChange: true } } on all queries having this issue.

[Panoplos]

Nope, still happening for me on 2.0...

[ajdegol]

*Deleted original comment.

There was a resetStore happening in another component. I added an await for that to complete before pushing to the new route and this resolved my issue. (2.0.1)

[Panoplos]

Ok. Confirmed this is fixed with 2.0.1.