Mirror: The highly customizable and versatile GraphQL client with which you add on features like normalized caching as you grow.
1# @urql/exchange-persisted
2
3The `persistedExchange` is an exchange that allows other terminating exchanges to support Persisted Queries, and is as such placed in front of either the default `fetchExchange` or
4other terminating exchanges.
5
6## Quick Start Guide
7
8First install `@urql/exchange-persisted` alongside `urql`:
9
10```sh
11yarn add @urql/exchange-persisted
12# or
13npm install --save @urql/exchange-persisted
14```
15
16You'll then need to add the `persistedExchange` function, that this package exposes,
17to your `exchanges`.
18
19```js
20import { createClient, fetchExchange, cacheExchange } from 'urql';
21import { persistedExchange } from '@urql/exchange-persisted';
22
23const client = createClient({
24 url: 'http://localhost:1234/graphql',
25 exchanges: [
26 cacheExchange,
27 persistedExchange({
28 /* optional config */
29 }),
30 fetchExchange,
31 ],
32});
33```
34
35The `persistedExchange` supports three configuration options:
36
37- `preferGetForPersistedQueries`: Enforce `GET` method to be used by the default `fetchExchange` for persisted queries
38- `enforcePersistedQueries`: This disables _automatic persisted queries_ and disables any retry logic for how the API responds to persisted queries. Instead it's assumed that they'll always succeed.
39- `generateHash`: A function that takes a GraphQL query and returns the hashed result. This defaults to the `window.crypto` API in the browser and the `crypto` module in Node.
40- `enableForMutation`: By default, the exchange only handles `query` operations, but enabling this allows it to handle mutations as well.
41
42## Avoid hashing during runtime
43
44If you want to generate hashes at build-time you can use a [webpack-loader](https://github.com/leoasis/graphql-persisted-document-loader) to achieve this,
45when using this all you need to do in this exchange is the following:
46
47```js
48import { createClient, fetchExchange, cacheExchange } from 'urql';
49import { persistedExchange } from '@urql/exchange-persisted';
50
51const client = createClient({
52 url: 'http://localhost:1234/graphql',
53 exchanges: [
54 cacheExchange,
55 persistedExchange({
56 generateHash: (_, document) => document.documentId,
57 }),
58 fetchExchange,
59 ],
60});
61```