Apollo-client: Loading state stuck true forever

Created on 4 Dec 2017  路  14Comments  路  Source: apollographql/apollo-client

If I send a query and get 404 error in response then everything will be ok and request state will change to loading=false and I will get appropriate error. But if I send the same query with the same or different paramaters one more time and again get server error then request loading state will keep true forever and apollo-link-error handler also will not catch an error. The only fallback for this case that I found is to set request options notifyOnNetworkStatusChange: true and errorPolicy: 'all' and check if data in response is empty.

Version

  • "apollo-cache-inmemory": "1.1.2",
  • "apollo-client": "2.1.0",
  • "apollo-link": "1.0.5",
  • "apollo-link-error": "1.0.2",
  • "apollo-link-http": "1.3.0",
  • "apollo-server-express": "1.2.0",
  • "graphql-apollo-errors": "2.0.3",
  • "graphql-tag": "2.6.0",

UPD:
Error handler from apollo-link-error works fine with the latest update for graphql-apollo-errors

Most helpful comment

I'm seeing the same behavior. After a data error, reissuing the same query causes the data loading flag to stay true. apollo-client 2.1.0 with react-apollo 2.0.4

All 14 comments

Related to #2687 ?

Yes, looks pretty similar. The only difference is graphql still makes network request after the first error happens, but does not handle response as expected.

@abulyshkin Are you positive it is issuing a new request? Maybe we could compare what we have and see if there are any significant differences?

We have also opened the same issue over at the react-apollo repository.

@nfantone It is definitely good to have as much examples of the error as possible. I suppose that the reason that causes error is the same in our cases. Btw I've updated graphql-apollo-errors to version "2.0.3" and graphql-tag "2.6.0" and handler from apollo-link-error works as expected for now, but the loading state still stuck to 'true'.

I checked in my usecase and the loading is correct, till you try to change inputs/re-render the HoC. That would than return the exact status as you would get if you run the same query with "resolve from cache" option in devtools.
I could live with that, but the HoC seems to be not observing store so even resolving the error state in 1 place would not trigger recalculation :-(

@ShockiTV Exactly the case we are observing. Re-rendering the HOC does not trigger a new request after any error occurs - but _does_ set data.loading to true (even with network-only cache policy on).

Further more, I _do_ believe the graphql HOC is watching the store. Take a look at my comment here. The component holds a queryObservable attribute that's the result of calling watchQuery() on the client.

I'm seeing the same behavior. After a data error, reissuing the same query causes the data loading flag to stay true. apollo-client 2.1.0 with react-apollo 2.0.4

I'm experiencing the same behavior after upgrading to apollo-client 2.0.

Confirming I'm experiencing the same issue when running a query with the same name as an existing one in another component/file. like so:

export default graphql(QUERY_USER, { name: 'query_user', options: { id }=> ({ variables: { id } }) })(ViewUser)

I have two queries named query_user, one of which resolves and one doesn't with an error. In this case, the query that fails shows the error for a millisecond and then toggles its loading state back on.

After renaming one of these queries, the query that errors no longer gets stuck in a loading state but properly returns the error.

Hi all - this should be fixed in newer versions of apollo-client. If you're still encountering this issue after updating to a current version (2.3.1 as of today), please post back and let us know. Thanks!

Still not resolved, I i refetch same query with same variables two-times, it stucks,
Temporary fix:
fetchPolicy="cache-and-network"

When I refetch with the same query after an error, it gets stuck for me as well.
I tried using both fetchPolicy of 'no-cache' and 'network-only'

As of today, my apollo versions are as follows
"apollo-angular": "1.5.0",
"apollo-angular-link-http": "1.6.0",
"apollo-cache-inmemory": "1.5.1",
"apollo-client": "2.5.1",
"apollo-link": "1.2.11"

I still have this issue (using a react higher order component)

    "apollo-client": "^2.5.1",
    "apollo-link-http": "^1.5.14",
    "react-apollo": "^2.5.2",

The request fails with a 401 (I know because the endpoint is not set up yet) but after this, there are no additional requests sent if the component is mounted again.
if I trigger a manual refetch of the query, a useful error is thrown

Uncaught (in promise) Error: Network error: Response not successful: Received status code 401

Edit: sorry noticed that it was a problem in my code...

Had this issue with "apollo-boost": "^0.3.1" , Query was always stuck on loading. This is with a pollInterval={1000}

My work around was

const shouldShowLoading = loading && !data.myData;
if (shouldShowLoading) {
  return <Loading />;
}

// use data.myData if it exists
doSomething(data.myData)

loading will be false until the data changes in the db. Otherwise, loading is always true with the same query params. However, data is still returned from the query, so I just used that instead.

Was this page helpful?
0 / 5 - 0 ratings