kitten.sh
1# With Automatic Persisted Queries
2
3<p>
4 <a href="https://stackblitz.com/github/urql-graphql/urql/tree/main/examples/with-apq">
5 <img
6 alt="Open in StackBlitz"
7 src="https://img.shields.io/badge/open_in_stackblitz-1269D3?logo=stackblitz&style=for-the-badge"
8 />
9 </a>
10 <a href="https://codesandbox.io/p/sandbox/github/urql-graphql/urql/tree/main/examples/with-apq">
11 <img
12 alt="Open in CodeSandbox"
13 src="https://img.shields.io/badge/open_in_codesandbox-151515?logo=codesandbox&style=for-the-badge"
14 />
15 </a>
16</p>
17
18This example shows `urql` in use with `@urql/exchange-persisted-fetch`'s `persistedFetchExchange`
19to support [Automatic Persisted
20Queries](https://www.apollographql.com/docs/apollo-server/performance/apq/). This largely follows
21the ["Persisted Queries" docs
22page](https://formidable.com/open-source/urql/docs/advanced/persistence-and-uploads/#automatic-persisted-queries)
23and uses the [`trygql.formidable.dev/graphql/apq-weather` schema](https://github.com/FormidableLabs/trygql).
24
25To run this example install dependencies and run the `start` script:
26
27```sh
28yarn install
29yarn run start
30# or
31npm install
32npm run start
33```
34
35This example contains:
36
37- The `urql` bindings and a React app with a client set up in [`src/App.jsx`](src/App.jsx)
38- The `persistedFetchExchange` from `@urql/exchange-persisted-fetch` in [`src/App.jsx`](src/App.jsx)
39- A query for locations in [`src/LocationsList.jsx`](src/pages/LocationsList.jsx)