kitten.sh
1# Integrating `@urql/exchange-retry`’s retryExchange
2
3<p>
4 <a href="https://stackblitz.com/github/urql-graphql/urql/tree/main/examples/with-retry">
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-retry">
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
18Integrating urql is as simple as:
19
201. Install packages
21
22```sh
23yarn add urql graphql
24# or
25npm install --save urql graphql
26```
27
282. Add [retry exchange](https://formidable.com/open-source/urql/docs/advanced/retry-operations/)
29
30```sh
31yarn add @urql/exchange-retry
32# or
33npm install --save @urql/exchange-retry
34```
35
363. Setting up the Client and adding the `retryExchange` [here](src/App.js)
37
384. Execute the Query [here](src/pages/Color.js)
39
40# With Retry
41
42This example shows `urql` in use with `@urql/exchange-retry`'s `retryExchange`
43to implement retrying failed operations. This largely follows the ["Retrying Operations" docs
44page](https://formidable.com/open-source/urql/docs/advanced/retry-operations/)
45and uses the [`trygql.formidable.dev/graphql/intermittent-colors`
46schema](https://github.com/FormidableLabs/trygql), which emits a special `NO_SOUP` error randomly.
47
48To run this example install dependencies and run the `start` script:
49
50```sh
51yarn install
52yarn run start
53# or
54npm install
55npm run start
56```
57
58This example contains:
59
60- The `urql` bindings and a React app with a client set up in [`src/App.jsx`](src/App.jsx)
61- The `retryExchange` from `@urql/exchange-retry` in [`src/App.jsx`](src/App.jsx)
62- A random colour query in [`src/Color.jsx`](src/pages/Color.jsx)