Context Link

Easily set a context on your operation, which is used by other links further down the chain.


Overview

The setContext function accepts a function that returns either an object or a promise, which then returns an object to set the new context of a request. It receives two arguments: the GraphQL request being executed, and the previous context. This link makes it easy to perform the asynchronous lookup of things like authentication tokens and more.

JavaScript
1import { setContext } from "@apollo/client/link/context";
2
3const setAuthorizationLink = setContext((request, previousContext) => ({
4  headers: {authorization: "1234"}
5}));
6
7const asyncAuthLink = setContext(
8  request =>
9    new Promise((success, fail) => {
10      // do some async lookup here
11      setTimeout(() => {
12        success({ token: "async found token" });
13      }, 10);
14    })
15);

Caching lookups

Typically async actions can be expensive and may not need to be called for every request, especially when a lot of request are happening at once. You can setup your own caching and invalidation outside of the link, to make it faster but still flexible.

Take for example a user auth token being found, cached, then removed on a 401 response:

JavaScript
1import { setContext } from "@apollo/client/link/context";
2import { onError } from "@apollo/client/link/error";
3
4// cached storage for the user token
5let token;
6const withToken = setContext(() => {
7  // if you have a cached value, return it immediately
8  if (token) return { token };
9
10  return AsyncTokenLookup().then(userToken => {
11    token = userToken;
12    return { token };
13  });
14});
15
16const resetToken = onError(({ networkError }) => {
17  if (
18    networkError &&
19    networkError.name ==='ServerError' &&
20    networkError.statusCode === 401
21  ) {
22    // remove cached token on 401 from the server
23    token = null;
24  }
25});
26
27const authFlowLink = withToken.concat(resetToken);