Mirror: The highly customizable and versatile GraphQL client with which you add on features like normalized caching as you grow.
1<h2 align="center">@urql/exchange-context</h2>
2
3<p align="center"><strong>An exchange for setting operation context in <code>urql</code></strong></p>
4
5`@urql/exchange-context` is an exchange for the [`urql`](https://github.com/urql-graphql/urql) GraphQL client which can set the operation context both synchronously as well as asynchronously
6
7## Quick Start Guide
8
9First install `@urql/exchange-context` alongside `urql`:
10
11```sh
12yarn add @urql/exchange-context
13# or
14npm install --save @urql/exchange-context
15```
16
17You'll then need to add the `contextExchange`, that this package exposes, to your `urql` Client, the positioning of this exchange depends on whether you set an async setter or not. If you set an async context-setter it's best placed after all the synchronous exchanges (in front of the fetchExchange).
18
19```js
20import { createClient, cacheExchange, fetchExchange } from 'urql';
21import { contextExchange } from '@urql/exchange-context';
22
23const client = createClient({
24 url: 'http://localhost:1234/graphql',
25 exchanges: [
26 cacheExchange,
27 contextExchange({
28 getContext: async operation => {
29 const token = await getToken();
30 return { ...operation.context, headers: { authorization: token } };
31 },
32 }),
33 fetchExchange,
34 ],
35});
36```