Mirror: The highly customizable and versatile GraphQL client with which you add on features like normalized caching as you grow.
1# With Graphcache's Pagination
2
3<p>
4 <a
5 href="https://stackblitz.com/github/urql-graphql/urql/tree/main/examples/with-graphcache-updates">
6 <img
7 alt="Open in StackBlitz"
8 src="https://img.shields.io/badge/open_in_stackblitz-1269D3?logo=stackblitz&style=for-the-badge"
9 />
10 </a>
11 <a
12 href="https://codesandbox.io/p/sandbox/github/urql-graphql/urql/tree/main/examples/with-graphcache-updates">
13 <img
14 alt="Open in CodeSandbox"
15 src="https://img.shields.io/badge/open_in_codesandbox-151515?logo=codesandbox&style=for-the-badge"
16 />
17 </a>
18</p>
19
20This example shows `urql` in use with `@urql/exchange-graphcache` and demonstrates a manual cache
21update, as explained in [the "Cache Updates" docs page](https://formidable.com/open-source/urql/docs/graphcache/cache-updates/).
22This example uses the [`trygql.formidable.dev/graphql/web-collections`
23schema](https://github.com/FormidableLabs/trygql) and builds on top of the [`with-refresh-auth`
24example](../with-refresh-auth) so that we can authenticate with the schema before creating links on
25it.
26
27To run this example install dependencies and run the `start` script:
28
29```sh
30yarn install
31yarn run start
32# or
33npm install
34npm run start
35```
36
37This example contains:
38
39- The `urql` bindings and a React app with a client set up in [`src/client.js`](src/client.js)
40- The `cacheExchange` from `@urql/exchange-graphcache` in [`src/client.js`](src/client.js)
41- A links list and link creation in [`src/pages/Links.jsx`](src/pages/Links.jsx)