Query stuck in loading state when rendered after a query or a network error #3090

ducarroz · 2019-06-03T20:48:35Z

Description
When a <Query> component which has previously resulted in a qraphQL or network error is re-rendered, its state changes from error to loading and no request is executed. The component is now stuck in loading state.

Intended outcome:
If the query variables do not change, the <Query> stay in error state. Else the state change to loading and a new request is executed (cache or network).

Actual outcome:
The <Query> component's state changes to loading and no request is executed, whatever the query's variables change or not.

How to reproduce the issue:
I made a sample project to demonstrate the issue at https://codesandbox.io/s/apolloquerystuckaftererror-heyxu

open https://codesandbox.io/s/apolloquerystuckaftererror-heyxu
click on 'Next' and wait for response (300ms)
click on 'GQL Error' or 'Link Error' and wait for response (300ms)
click on 'Next' or 'Same'
==> <Query> stuck in loading state

Version

The text was updated successfully, but these errors were encountered:

React Apollo relies on the `ObervableQuery->getCurrentResult` method to retrieve query results to show within its components. When an error occurs while fetching results, that error is stored in the query store that each `ObservableQuery` instance is configured to use. Unfortunately, `getCurrentResult` will only retrieve subsequent results if no error exists in the query store. `ObservableQuery` doesn't currently provide a way to clear out query store errors, which means when React Apollo originating requests that cause an error occur, the error is stored, and future valid requests can no longer be processed. This commit adds a `resetQueryStoreErrors` method to the `ObservableQuery` public API, that will allow React Apollo (and other consumers) to be able to clear out query store errors. Related to: apollographql/react-apollo#3090

The React Apollo `Query` component relies on Apollo Client's `ObservableQuery->getCurrentResult` method to get the results of a query to display. When `ObservableQuery` encounters an error, it stores that error in its associated query store, so that it can be passed back to React Apollo for handling. Unfortunately, the error stored in the query store isn't cleared out until a component unmounts, which means components that handle an error response followed by a valid response, won't get the chance to render the valid response. They're stuck rendering the error state, since the error stored in the `ObservableQuery` query store is never removed. This commit calls into a new `ObservableQuery.resetQueryStoreErrors` method, to clear out previously used errors, before moving on to handle subsequent responses. This means a component can handle an error, then receive and display a valid subsequent response. Fixes: #3090

hwillson · 2019-06-15T13:41:37Z

We're just waiting on related Apollo Client changes, then we can get the fix for this (#3107) merged in. This will be included in the next RA release (actually, we're holding up the next release until this issue is resolved).

…4941) * Reset query store errors via `ObservableQuery.resetQueryStoreErrors` React Apollo relies on the `ObervableQuery->getCurrentResult` method to retrieve query results to show within its components. When an error occurs while fetching results, that error is stored in the query store that each `ObservableQuery` instance is configured to use. Unfortunately, `getCurrentResult` will only retrieve subsequent results if no error exists in the query store. `ObservableQuery` doesn't currently provide a way to clear out query store errors, which means when React Apollo originating requests that cause an error occur, the error is stored, and future valid requests can no longer be processed. This commit adds a `resetQueryStoreErrors` method to the `ObservableQuery` public API, that will allow React Apollo (and other consumers) to be able to clear out query store errors. Related to: apollographql/react-apollo#3090 * Changelog update * Remove unnecessary expect

* Fix always loading issue caused by error handling The React Apollo `Query` component relies on Apollo Client's `ObservableQuery->getCurrentResult` method to get the results of a query to display. When `ObservableQuery` encounters an error, it stores that error in its associated query store, so that it can be passed back to React Apollo for handling. Unfortunately, the error stored in the query store isn't cleared out until a component unmounts, which means components that handle an error response followed by a valid response, won't get the chance to render the valid response. They're stuck rendering the error state, since the error stored in the `ObservableQuery` query store is never removed. This commit calls into a new `ObservableQuery.resetQueryStoreErrors` method, to clear out previously used errors, before moving on to handle subsequent responses. This means a component can handle an error, then receive and display a valid subsequent response. Fixes: #3090 * Changelog update * Update deps to use new `apollo-client` 2.6.3

To fix issue #3090, the `ObservableQuery.resetQueryStoreErrors` method was introduced in `apollo-client` 2.6.3. While `apollo-client` 2.6.3 is a peer dep of the latest version of `react-apollo` (2.5.7), people who can't update their version of `apollo-client` to >= 2.6.3 are running into issues when updating to the latest version of `react-apollo`, since `ObservableQuery.resetQueryStoreErrors` isn't available to them. Since we can't enforce the version of `apollo-client` people are using, this commit adjusts the `Query` component to only use `resetQueryStoreErrors` if it's available. If it isn't, it will call into the `ObservableQuery`'s private API to do the same things as `resetQueryStoreErrors`. This is a hack, but it is temporary as `react-apollo` is launching soon, and will enforce a minimum `apollo-client` version of 2.6.3 (so this workaround won't be needed). Fixes #3148.

* Conditionally use AC's `ObservableQuery.resetQueryStoreErrors` To fix issue #3090, the `ObservableQuery.resetQueryStoreErrors` method was introduced in `apollo-client` 2.6.3. While `apollo-client` 2.6.3 is a peer dep of the latest version of `react-apollo` (2.5.7), people who can't update their version of `apollo-client` to >= 2.6.3 are running into issues when updating to the latest version of `react-apollo`, since `ObservableQuery.resetQueryStoreErrors` isn't available to them. Since we can't enforce the version of `apollo-client` people are using, this commit adjusts the `Query` component to only use `resetQueryStoreErrors` if it's available. If it isn't, it will call into the `ObservableQuery`'s private API to do the same things as `resetQueryStoreErrors`. This is a hack, but it is temporary as `react-apollo` is launching soon, and will enforce a minimum `apollo-client` version of 2.6.3 (so this workaround won't be needed). Fixes #3148. * Changelog update

tsjohns9 · 2019-08-30T05:41:56Z

It looks like this issue has been merged, but I still consistently get this error.

I am using the useLazyQuery hook from @apollo/react-hooks

Here are my dependencies:

	"dependencies": {
		"@apollo/react-ssr": "^3.0.1",
		"apollo-boost": "^0.4.4",
		"next": "9.0.4",
		"next-with-apollo": "^4.2.0",
		"react": "16.9.0",
		"react-apollo": "^3.0.1",
		"react-dom": "16.9.0"
	},

I am working on a login form. So far I am having two issues.

When logging in with an incorrect username/password the graphql server returns an error. This error gets rendered to the UI. When attempting to log in again with the same incorrect credentials no request is made, and the error clears out. The returned data is always undefined. This happens even though I have fetchPolicy set to network-only.
When logging in with an incorrect username/password for the first time, and then trying again with a different user/pass combination the query gets stuck in a loading state, and a network request is performed and resolved but I receive no update.

ducarroz · 2019-08-30T15:57:58Z

@tsjohns9 seems like similar to #3425.

ducarroz mentioned this issue Jun 4, 2019

Loading state stuck on true and network request is never made #1385

Closed

hwillson added bug confirmed labels Jun 4, 2019

hwillson self-assigned this Jun 5, 2019

hwillson mentioned this issue Jun 10, 2019

Reset query store errors via ObservableQuery.resetQueryStoreErrors apollographql/apollo-client#4941

Merged

hwillson mentioned this issue Jun 10, 2019

Fix always loading issue caused by error handling #3107

Merged

hwillson closed this as completed in #3107 Jun 18, 2019

hwillson mentioned this issue Jun 21, 2019

currentObservable.query.getCurrentResult is not a function #3148

Closed

hwillson mentioned this issue Jun 22, 2019

Conditionally use AC's ObservableQuery.resetQueryStoreErrors #3151

Merged

kaatt mentioned this issue Jan 2, 2020

useQuery Hook always return true on loading state - previous issue needed to be reopened #3774

Open

davetapley mentioned this issue Jan 18, 2020

Race condition in useSubscription causing 'loading' to remain true #3802

Open

julian-sf mentioned this issue Jun 2, 2020

useQuery loading state stays true after fetch finishes apollographql/apollo-client#6334

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Query stuck in loading state when rendered after a query or a network error #3090

Query stuck in loading state when rendered after a query or a network error #3090

ducarroz commented Jun 3, 2019

hwillson commented Jun 15, 2019

tsjohns9 commented Aug 30, 2019 •

edited

Loading

ducarroz commented Aug 30, 2019 •

edited

Loading

Query stuck in loading state when rendered after a query or a network error #3090

Query stuck in loading state when rendered after a query or a network error #3090

Comments

ducarroz commented Jun 3, 2019

hwillson commented Jun 15, 2019

tsjohns9 commented Aug 30, 2019 • edited Loading

ducarroz commented Aug 30, 2019 • edited Loading

tsjohns9 commented Aug 30, 2019 •

edited

Loading

ducarroz commented Aug 30, 2019 •

edited

Loading