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-graphcache</h2>
2
3<p align="center"><strong>An exchange for normalized caching support in <code>urql</code></strong></p>
4
5`@urql/exchange-graphcache` is a normalized cache exchange for the [`urql`](https://github.com/urql-graphql/urql) GraphQL client.
6This is a drop-in replacement for the default `cacheExchange` that, instead of document
7caching, caches normalized data by keys and connections between data.
8
9You can also pass your introspected GraphQL schema to the `cacheExchange`, which enables
10it to deliver partial results and match fragments deterministically!
11
12`urql` is already quite a comprehensive GraphQL client. However in several cases it may be
13desirable to have data update across the entirety of an app when a response updates some
14known pieces of data.
15
16[Learn more about Graphcache and normalized caching on our docs!](https://formidable.com/open-source/urql/docs/graphcache/)
17
18## Quick Start Guide
19
20First install `@urql/exchange-graphcache` alongside `urql`:
21
22```sh
23yarn add @urql/exchange-graphcache
24# or
25npm install --save @urql/exchange-graphcache
26```
27
28You'll then need to add the `cacheExchange`, that this package exposes, to your `urql` Client,
29by replacing the default cache exchange with it:
30
31```js
32import { createClient, fetchExchange } from 'urql';
33import { cacheExchange } from '@urql/exchange-graphcache';
34
35const client = createClient({
36 url: 'http://localhost:1234/graphql',
37 exchanges: [
38 // Replace the default cacheExchange with the new one
39 cacheExchange({
40 /* optional config */
41 }),
42 fetchExchange,
43 ],
44});
45```