Apollo-client: Errors seem to be cached

[shoooe]

Intended outcome:
I'm working on a sign-in flow. At first there's a query to try to access the logged user information which errors out (correctly) and the data is correctly ignored and the error correctly reported.

Then the user logs in (sign in mutation):

const response = await signIn({ 
    variables: values 
});
localStorage.setItem('token', response.data.signIn.id);
history.push('/dashboard');

In the above code history is that of react-router-dom. It just triggers another page load which, as first thing, tries to read the logged user informations (query A).

In practice, these are the expected steps:

1. Query A errors out (due to unauthorized access)
2. Mutation B succeeds (sign in mutation)
3. Query A succeeds (the resource is now available)

Actual outcome:

Network wise the outcome is exactly as expected:

1. Query A errors out (due to unauthorized access)
2. Mutation B succeeds (sign in mutation)
3. Query A succeeds (the resource is now available)

In the image you can see the three requests in the Chrome Network tab: the first one is the OPTIONS request. Then there's the sign in mutation. And finally the highlighted one is the query A being performed and returning the correct data. The response is in the form { "data": ... } and there are no errors in that request whatsoever. Not even in the JSON response body.

Apollo wise instead we see this behaviour:

1. Query A errors out (due to unauthorized access)
2. Mutation B succeeds (sign in mutation)
   _3. Query A errors out with the same error as step 1_

And the console log proves this:

In the console log for each request document: and token: is printed. And as expected we see two requests (sign in mutation + query A). This is the link that prints it to the screen:

const authLink = setContext((a, { headers }) => {
    const token = localStorage.getItem('token');
    console.log('document:', a);
    console.log('token:', token);
    return {
        headers: {
            ...headers,
            authorization: token ? `Bearer ${token}` : null,
        }
    }
});

In the first request a previous non-valid token is used. In the second one the token from the first request is used correctly and it's valid (that's why it returns correctly in the network tab).

The error reference is this:

which is not part of my code.

The error policy is not specified (so it defaults to none according to the documentation; therefore, theoretically, errors shouldn't be cached).

How to reproduce the issue:

It's hard for me to create a SSCCE, but to reproduce this issue you can have:

1. A query which returns an error
2. Perform a mutation
3. Perform that query again with different headers only (the token is passed as Authorization: header).

Version

• [email protected]

[evans]

https://codesandbox.io/s/03v84l6y3n just hit the button a couple times

@Dremora created this ^ reproduction 🎉

@abhiaiyer91 this might be a good issue to look at with the reproduction

cc @hwillson

[abhiaiyer91]

Doing some initial investigation here, stumbled across this line:

https://github.com/apollographql/apollo-client/blob/b4ff8a4f11465305a8879de008f615e85d3117ff/packages/apollo-client/src/data/queries.ts#L83

Will start writing some failing test cases.

[abhiaiyer91]

Here is the failing test:
https://github.com/apollographql/apollo-client/pull/3563

[jbaxleyiii]

Thanks for reporting this. There hasn't been any activity here in quite some time, so we'll close this issue for now. If this is still a problem (using a modern version of Apollo Client), please let us know. Thanks!