(examples) Usage of retryExchange (#1575)

* Add retryExchange usage example

examples/with-retry/README.md

@@ -0,0 +1,15 @@
+# Integrating `@urql/exchange-retry`’s retryExchange
+
+Integrating urql is as simple as:
+
+1.  Install packages
+
+yarn add urql @urql/exchange-retry graphql
+
+# or
+
+npm install --save urql @urql/exchange-retry graphql
+
+2.  Setting up the Client and adding the `retryExchange` [here](src/App.js)
+
+3.  Execute the Query [here](src/pages/PokemonList.js)

examples/with-retry/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "urlq-retry-query",
+  "version": "1.0.0",
+  "private": true,
+  "dependencies": {
+    "@urql/exchange-retry": "^0.2.0",
+    "graphql": "^15.5.0",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "urql": "^2.0.2"
+  },
+  "devDependencies": {
+    "react-scripts": "4.0.3"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}

examples/with-retry/src/App.js

@@ -0,0 +1,27 @@
+import { createClient, fetchExchange, Provider } from "urql";
+import { retryExchange } from '@urql/exchange-retry';
+
+import Color from "./pages/Color";
+
+const client = createClient({
+  url: "https://trygql.dev/graphql/intermittent-colors",
+  exchanges: [
+    retryExchange({
+      maxNumberAttempts: 5,
+      retryIf: error => {
+        return error.graphQLErrors.length || error.networkError;
+      }
+    }), // Use the retryExchange factory to add a new exchange,
+    fetchExchange
+  ],
+});
+
+function App() {
+  return (
+    <Provider value={client}>
+      <Color />
+    </Provider>
+  );
+}
+
+export default App;

examples/with-retry/src/index.css

@@ -0,0 +1,13 @@
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+}

examples/with-retry/src/index.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import './index.css';
+import App from './App';
+
+ReactDOM.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+  document.getElementById('root')
+);

examples/with-retry/src/pages/Color.js

@@ -0,0 +1,37 @@
+import React from "react";
+import { gql, useQuery } from "urql";
+
+const RANDOM_COLOR_QUERY = gql`
+  query RandomColor {
+    randomColor {
+      name
+      hex
+    }
+  }
+`;
+
+const RandomColorDisplay = () => {
+  const [result] = useQuery({ query: RANDOM_COLOR_QUERY });
+
+  const { data, fetching, error } = result;
+
+  return (
+    <div>
+      {fetching && <p>Loading...</p>}
+
+      {error && <p>Oh no... {error.message}</p>}
+
+      {data && (
+        <div style={{ backgroundColor: data.randomColor.hex }}>
+          {data.randomColor.name}
+        </div>
+      )}
+
+      {result.operation && (
+        <p>We retried {result.operation.context.retryCount} times to get a result without an error.</p>
+      )}
+    </div>
+  );
+};
+
+export default RandomColorDisplay;