Error on query cached and copied onto next query

Intended outcome

We are using @apollo/client@3.2.4 and React

We have a query that takes variables that we are calling using the useQuery hook in our component

const { loading, error, data } = useQuery(QUERY, {
    variables: { variable1 },
  });

variable1 defaults to value1 which returns correct data from the server. This is cached as expected in the client.

{
    "data":{"array1":[{ "field1": "value1" }]}
}

The values of loading, error and data are as follows

{ loading: true, error: undefined, data: undefined }
{ loading: false, error: undefined, data: { array1:[{ field1: "value1" }]} }

We change the value of variable1 via a dropdown to value2 This rerenders the component with the value2 in variable1

The server returns an error response when it receives value2

{
    "errors":[{"message":"GraphQL Error."}],
    "data":{"array1":nulll}
}

The values of loading, error and data are as follows

{ loading: true, error: undefined, data: undefined }
{ loading: false, error: "GraphQL Error.", data: undefined }

We change the value of variable1 via a dropdown back to value1 This rerenders the component with the value1 in variable1

We expect the cached result from previous to be returned

{ loading: false, error: undefined, data: { array1:[{ field1: "value1" }]} }

Actual outcome

The cached result is returned, however the errors from the previous query are also returned, which confuses the rendering logic

{ loading: false, error: "GraphQL Error.", data: { array1:[{ field1: "value1" }]} }

Notes

This only happens when the third call is cached. If it goes through to the server it works as expected. This only happens if the most recent last call resulted in an error. I have put together a potential fix in a PR https://github.com/apollographql/apollo-client/pull/7163

Versions

System: OS: macOS 10.15.6 Binaries: Node: 13.12.0 Yarn: 1.22.5 npm: 6.14.4 Browsers: Chrome: 86.0.4240.80 Edge: 85.0.564.60 Firefox: 80.0.1 Safari: 13.1.2

[rettgerst]

okay, here is my simple reproduction app: https://codesandbox.io/s/hopeful-meitner-hmllm?file=/src/App.tsx

leveraging the public graphql api from AniList, the app shows information about anime characters. one of the options is Katara from ATLA, which will produce an error because she is not in the AniList database.

to reproduce the issue - click on the first two options to prime the in-memory cache, then click on the Katara button to issue a request which will error. Then click on one of the other characters again. The data for the selected character is retrieved from cache and displayed onscreen, however the error from the previous request remains.

[ludwigbacklund]

@ShuPink I doubt it is by design as it only propagates the previous requests error onto the request.

Our workaround currently is to do the following

if (error && !data && !loading) {
 // Render error state
}

The only problem with this approach is that if the errorPolicy is ‘all’ it can make it quite difficult to tell the difference between error and non error states.

It works for now however.

We have the same problem and use this workaround for now. Our problem exactly mirrors the one in the reproduction app @rettgerst posted above.