Apollo-client: Mutation component ignores context headers for refetchQueries

Created on 13 Jun 2018 · 7Comments · Source: apollographql/apollo-client

Intended outcome:
Queries specified as string array to the refetchQueries option of a mutation call should have headers included as specified by the context prop of the Mutation component.

Actual outcome:
The mutation uses the auth headers in the context but when the refetchQueries are run they are sent without headers.

How to reproduce the issue:

<Mutation
    mutation={MyMutation}
    context={ headers: {
      authorization: token ? `Bearer ${token}` : ""
    }}>
        {(mutate) => (
            mutate({
                variables: { ... },
                refetchQueries: ["MyOtherQuery"],
            });
    )}
</Mutation>

When MyMutationis sent to the server the headers specified in the context prop are included in the HTTP request. But when the mutation has completed and MyOtherQuery is run, the HTTP request does not contain the headers and therefore gives a 403 error.

Versions

[email protected]

The requested command to get versions does not seem to work:

$ npx envinfo@latest --preset apollo --clipboard
npx: installed 1 in 1.95s
Path must be a string. Received undefined
npx: installed 1 in 1.89s
C:\Users\jonkel.DIVID\AppData\Roaming\npm-cache\_npx\11232\node_modules\envinfo\dist\cli.js

  System:
    OS: Windows 10
  Binaries:
    Yarn: 1.7.0 - C:\Users\jonkel.DIVID\AppData\Roaming\npm\yarn.CMD
    npm: 5.7.1 - C:\PROGRAM FILES\NODEJS\npm.CMD
  Browsers:
    Edge: 41.16299.402.0

(node:11232) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1): Error: The system cannot find the path specified.

(node:11232) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

good-first-issue ✔ confirmed 🏃‍♂️ medium-priority 🐞 bug 🙏 help-wanted

Source

jonaskello

👍1

Most helpful comment

@stubailo Yes I do know this option exists. However my architecture is built around having the access token in the redux store and passing it to components. Since it is not possible to access the redux store in the links this is not a good option for me. It would require that I rebuild all the security infrastructure in my app. Plus I like the existing architecture as it keeps all state in one place, including the token.

jonaskello on 19 Jun 2018

👍2

All 7 comments

Confirmed 🐛 - thanks for reporting this @jonaskello!

If anyone is interested in helping out with this, the following just needs to be updated to add the mutate functions passed in context param:

https://github.com/apollographql/apollo-client/blob/ef32c3250e51f55c328fef5e3e45d59397d92206/packages/apollo-client/src/core/QueryManager.ts#L263-L267

hwillson on 13 Jun 2018

👍1

I'll try to take a stab at it:-).

jonaskello on 13 Jun 2018

My PR with the fix for this is in #3580.

jonaskello on 13 Jun 2018

Have you considered instead setting the header inside the HTTP Link so that they are automatically sent on every request?

stubailo on 19 Jun 2018

jonaskello on 19 Jun 2018

👍2

@jonaskello I have the exact same requirement, nevertheless the headers passed through context are still not included in the request with apollo-client ^2.6.8:

    const { data } = await apolloClient.mutate({
      mutation: loginMutation,
      variables: { email: action.email, password: action.password },
      context: {
        headers: { cookie: cookieValue },
      },
    });