Apollo-client: Use setContext with Apollo Client 3.0

[hannojg]

Intended outcome:
using Bearer Authentication, thus having looked up in the docs how to do it: https://www.apollographql.com/docs/react/v3.0-beta/networking/authentication/#header

Actual outcome:
https://www.apollographql.com/docs/react/v3.0-beta/networking/authentication/#header
In the code example, setContext is used, but it isn't shown where it is imported from.
I can find references in the web, that one should import it from apollo-link-context, but I am not sure whether this is still the way to go with v3.0.
Anyways, I think in the docs it should be methioned where to import it from 😊

How to reproduce the issue:
Try to follow the docs

Versions
System:
OS: macOS 10.15.3
Binaries:
Node: 10.19.0 - ~/.nvm/versions/node/v10.19.0/bin/node
Yarn: 1.22.4 - ~/.nvm/versions/node/v10.19.0/bin/yarn
npm: 6.13.4 - ~/.nvm/versions/node/v10.19.0/bin/npm
Browsers:
Chrome: 80.0.3987.149
Firefox: 74.0
Safari: 13.0.5
npmPackages:
@apollo/client: ^3.0.0-beta.41 => 3.0.0-beta.41
@apollo/link-ws: ^2.0.0-beta.3 => 2.0.0-beta.3

Thank you so much in advance for your time!

[dodas]

Most of the apollo-link-* packages are now under @apollo/link-* namespace.

import { setContext } from "@apollo/link-context";

I agree that this is poorly documented so far.

[hannojg]

Having @apollo/client: ^3.0.0-beta.41 installed I can't find @apollo/link-context 🤔

[ivdma]

It’s a separate package https://www.npmjs.com/package/@apollo/link-context
Docs should improve there a bit. Migration guide mentions that change.

[Jiert]

@hannojg use this:

import { setContext } from '@apollo/client/link/context';

https://www.apollographql.com/docs/react/networking/authentication/#header

[macrozone]

this is indeed poorly documented. https://www.apollographql.com/docs/link/links/context/ still states that you should import

import { setContext } from "apollo-link-context"; !

but then it was changed to

import { setContext } from '@apollo/link-context';

and now its

import { setContext } from '@apollo/client/link/context';

in some documentation

[gebigoma]

Man - this was not fun. All of the info in the official docs are wrong. What worked for me was to import from apollo-link-context import { setContext } from 'apollo-link-context'

[gebigoma]

Ok also just installed the additional package npm i @apollo/link-context and imported import { setContext } from '@apollo/link-context'. Sent a request and headers are attached properly as well.

[FenixTfive]

use something like this --> this works in v3

import { ApolloClient, InMemoryCache, ApolloProvider,createHttpLink } from "@apollo/client";
import { setContext } from "@apollo/client/link/context";

const httpLink = createHttpLink ({
uri: "http://localhost:4000/graphql",
});
const authLink = setContext((_, { headers }) => {
const token = auth.token;
return {
headers: {
...headers,
authorization: token ? Bearer ${token} : "",
},
};
});
const client = new ApolloClient({
cache: new InMemoryCache(),
link: authLink.concat(httpLink),
});