Mirror: The highly customizable and versatile GraphQL client with which you add on features like normalized caching as you grow.
(examples) - Add readme and increase consistency (#1616)
authored by
Phil Pluckthun
and committed by
GitHub
76043cb9
367d1985
+269
-215
+14
examples/README.md
+14
examples/README.md
···
1
+
| Example | Description |
2
+
| ------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------ |
3
+
| [`with-react`](./with-react) | Shows a basic query in `urql` with React. |
4
+
| [`with-react-native`](./with-react-native) | Shows a basic query in `urql` with React Native. |
5
+
| [`with-svelte`](./with-svelte) | Shows a basic query in `@urql/svelte` with Svelte. |
6
+
| [`with-vue3`](./with-vue3) | Shows a basic query in `@urql/vue` with Vue 3. |
7
+
| [`with-next`](./with-next) | Shows some examples with `next-urql` in Next.js with the default, `getStaticProps` and `getServerSideProps`. |
8
+
| [`with-pagination`](./with-pagination) | Shows how to generically set up infinite pagination with `urql` in UI code. |
9
+
| [`with-apq`](./with-apq) | Shows Automatic Persisted Queries with `@urql/exchange-persisted-fetch`. |
10
+
| [`with-graphcache-updates`](./with-graphcache-updates) | Shows manual cache updates with `@urql/exchange-graphcache`. |
11
+
| [`with-graphcache-pagination`](./with-graphcache-pagination) | Shows the automatic infinite pagination helpers from `@urql/exchange-graphcache`. |
12
+
| [`with-multipart`](./with-multipart) | Shows file upload support with `@urql/exchange-multipart-fetch`. |
13
+
| [`with-refresh-auth`](./with-refresh-auth) | Shows an example of authentication with refresh tokens using `@urql/exchange-auth`. |
14
+
| [`with-retry`](./with-retry) | Shows how to set up `@urql/exchange-retry` for retrying failed operations. |
+16
-16
examples/with-apq/README.md
+16
-16
examples/with-apq/README.md
···
1
-
# Integrating with `@urql/exchange-persisted-fetch`’s persistedFetchExchange
2
-
3
-
Integrating urql is as simple as:
4
-
5
-
1. Install packages [getting started](https://formidable.com/open-source/urql/docs/basics/react-preact/)
6
-
7
-
```sh
8
-
yarn add urql graphql
9
-
# or
10
-
npm install --save urql graphql
11
-
```
1
+
# With Automatic Persisted Queries
12
2
13
-
2. Then install the package for [automatic persisted queries](https://formidable.com/open-source/urql/docs/advanced/persistence-and-uploads/)
3
+
This example shows `urql` in use with `@urql/exchange-persisted-fetch`'s `persistedFetchExchange`
4
+
to support [Automatic Persisted
5
+
Queries](https://www.apollographql.com/docs/apollo-server/performance/apq/). This largely follows
6
+
the ["Persisted Queries" docs
7
+
page](https://formidable.com/open-source/urql/docs/advanced/persistence-and-uploads/#automatic-persisted-queries)
8
+
and uses the [`trygql.formidable.dev/graphql/apq-weather` schema](https://github.com/FormidableLabs/trygql).
14
9
10
+
To run this example install dependencies and run the `start` script:
15
11
16
12
```sh
17
-
yarn add @urql/exchange-persisted-fetch
13
+
yarn install
14
+
yarn run start
18
15
# or
19
-
npm install --save @urql/exchange-persisted-fetch
16
+
npm install
17
+
npm run start
20
18
```
21
19
22
-
3. Setting up the Client and adding persistedFetchExchange [here](src/App.js)
20
+
This example contains:
23
21
24
-
4. Execute the Query [here](src/pages/LocationsList.js)
22
+
- The `urql` bindings and a React app with a client set up in [`src/App.js`](src/App.js)
23
+
- The `persistedFetchExchange` from `@urql/exchange-persisted-fetch` in [`src/App.js`](src/App.js)
24
+
- A query for locations in [`src/pages/LocationsList.js`](src/pages/LocationsList.js)
+2
-8
examples/with-apq/package.json
+2
-8
examples/with-apq/package.json
···
1
1
{
2
-
"name": "react-urql-query",
3
-
"version": "1.0.0",
2
+
"name": "with-apq",
3
+
"version": "0.0.0",
4
4
"private": true,
5
5
"dependencies": {
6
6
"@urql/exchange-persisted-fetch": "^1.3.0",
···
17
17
"build": "react-scripts build",
18
18
"test": "react-scripts test",
19
19
"eject": "react-scripts eject"
20
-
},
21
-
"eslintConfig": {
22
-
"extends": [
23
-
"react-app",
24
-
"react-app/jest"
25
-
]
26
20
},
27
21
"browserslist": {
28
22
"production": [
+1
-1
examples/with-apq/src/App.js
+1
-1
examples/with-apq/src/App.js
-25
examples/with-cache-updates/README.md
-25
examples/with-cache-updates/README.md
···
1
-
# Integrating with `@urql/exchange-graphcache`'s cacheExchange Cache Updates
2
-
3
-
Integrating urql is as simple as:
4
-
5
-
1. Install packages [getting started](https://formidable.com/open-source/urql/docs/basics/react-preact/)
6
-
7
-
```sh
8
-
yarn add urql graphql
9
-
# or
10
-
npm install --save urql graphql
11
-
```
12
-
13
-
2. Install [graphcache](https://formidable.com/open-source/urql/docs/graphcache/)
14
-
15
-
```sh
16
-
yarn add @urql/exchange-graphcache
17
-
# or
18
-
npm install --save @urql/exchange-graphcache
19
-
```
20
-
21
-
3. Setting up the Client [here](src/App.js)
22
-
23
-
4. Configure the Client for handling cache updates [here](src/client/index.js#76)
24
-
25
-
5. Execute the create Mutation [here](src/pages/Links.js)
+2
-8
examples/with-cache-updates/package.json
examples/with-graphcache-updates/package.json
+2
-8
examples/with-cache-updates/package.json
examples/with-graphcache-updates/package.json
···
1
1
{
2
-
"name": "react-urql-query",
3
-
"version": "1.0.0",
2
+
"name": "with-graphcache-updates",
3
+
"version": "0.0.0",
4
4
"private": true,
5
5
"dependencies": {
6
6
"@urql/exchange-auth": "^0.1.2",
···
18
18
"build": "react-scripts build",
19
19
"test": "react-scripts test",
20
20
"eject": "react-scripts eject"
21
-
},
22
-
"eslintConfig": {
23
-
"extends": [
24
-
"react-app",
25
-
"react-app/jest"
26
-
]
27
21
},
28
22
"browserslist": {
29
23
"production": [
+1
-1
examples/with-cache-updates/src/App.js
examples/with-graphcache-updates/src/App.js
+1
-1
examples/with-cache-updates/src/App.js
examples/with-graphcache-updates/src/App.js
+1
-1
examples/with-cache-updates/src/client/index.js
examples/with-graphcache-updates/src/client/index.js
+1
-1
examples/with-cache-updates/src/client/index.js
examples/with-graphcache-updates/src/client/index.js
examples/with-cache-updates/src/index.css
examples/with-graphcache-updates/src/index.css
examples/with-cache-updates/src/index.css
examples/with-graphcache-updates/src/index.css
examples/with-cache-updates/src/index.js
examples/with-graphcache-updates/src/index.js
examples/with-cache-updates/src/index.js
examples/with-graphcache-updates/src/index.js
examples/with-cache-updates/src/pages/Home.js
examples/with-graphcache-updates/src/pages/Home.js
examples/with-cache-updates/src/pages/Home.js
examples/with-graphcache-updates/src/pages/Home.js
examples/with-cache-updates/src/pages/Links.js
examples/with-graphcache-updates/src/pages/Links.js
examples/with-cache-updates/src/pages/Links.js
examples/with-graphcache-updates/src/pages/Links.js
examples/with-cache-updates/src/pages/LoginForm.js
examples/with-graphcache-updates/src/pages/LoginForm.js
examples/with-cache-updates/src/pages/LoginForm.js
examples/with-graphcache-updates/src/pages/LoginForm.js
+15
-15
examples/with-graphcache-pagination/README.md
+15
-15
examples/with-graphcache-pagination/README.md
···
1
-
# Integrating with `@urql/exchange-graphcache`'s cacheExchange pagination
2
-
3
-
Integrating urql is as simple as:
1
+
# With Graphcache's Pagination
4
2
5
-
1. Install packages [getting started](https://formidable.com/open-source/urql/docs/basics/react-preact/)
6
-
7
-
```sh
8
-
yarn add urql graphql
9
-
# or
10
-
npm install --save urql graphql
11
-
```
3
+
This example shows `urql` in use with `@urql/exchange-graphcache`'s infinite pagination helpers to
4
+
merge several pages of a Relay-compliant schema into an infinite list.
5
+
This largely follows the ["Pagination" section on the "Local Resolvers" docs
6
+
page](https://formidable.com/open-source/urql/docs/graphcache/local-resolvers/#pagination)
7
+
and uses the [`trygql.formidable.dev/graphql/relay-npm` schema](https://github.com/FormidableLabs/trygql).
12
8
13
-
2. Install [graphcache](https://formidable.com/open-source/urql/docs/graphcache/)
9
+
To run this example install dependencies and run the `start` script:
14
10
15
11
```sh
16
-
yarn add @urql/exchange-graphcache
12
+
yarn install
13
+
yarn run start
17
14
# or
18
-
npm install --save @urql/exchange-graphcache
15
+
npm install
16
+
npm run start
19
17
```
20
18
21
-
3. Setting up the Client [here](src/App.js)
19
+
This example contains:
22
20
23
-
4. Execute the Query [here](src/pages/PaginatedNpmSearch.js)
21
+
- The `urql` bindings and a React app with a client set up in [`src/App.js`](src/App.js)
22
+
- The `cacheExchange` from `@urql/exchange-graphcache` in [`src/App.js`](src/App.js)
23
+
- A paginated query for packages in [`src/pages/PaginatedNpmSearch.js`](src/pages/PaginatedNpmSearch.js)
+2
-8
examples/with-graphcache-pagination/package.json
+2
-8
examples/with-graphcache-pagination/package.json
···
1
1
{
2
-
"name": "react-urql-query",
3
-
"version": "1.0.0",
2
+
"name": "with-graphcache-pagination",
3
+
"version": "0.0.0",
4
4
"private": true,
5
5
"dependencies": {
6
6
"@urql/exchange-graphcache": "^4.0.0",
···
17
17
"build": "react-scripts build",
18
18
"test": "react-scripts test",
19
19
"eject": "react-scripts eject"
20
-
},
21
-
"eslintConfig": {
22
-
"extends": [
23
-
"react-app",
24
-
"react-app/jest"
25
-
]
26
20
},
27
21
"browserslist": {
28
22
"production": [
+1
-1
examples/with-graphcache-pagination/src/App.js
+1
-1
examples/with-graphcache-pagination/src/App.js
+24
examples/with-graphcache-updates/README.md
+24
examples/with-graphcache-updates/README.md
···
1
+
# With Graphcache's Pagination
2
+
3
+
This example shows `urql` in use with `@urql/exchange-graphcache` and demonstrates a manual cache
4
+
update, as explained in [the "Cache Updates" docs page](https://formidable.com/open-source/urql/docs/graphcache/cache-updates/).
5
+
This example uses the [`trygql.formidable.dev/graphql/web-collections`
6
+
schema](https://github.com/FormidableLabs/trygql) and builds on top of the [`with-refresh-auth`
7
+
example](../with-refresh-auth) so that we can authenticate with the schema before creating links on
8
+
it.
9
+
10
+
To run this example install dependencies and run the `start` script:
11
+
12
+
```sh
13
+
yarn install
14
+
yarn run start
15
+
# or
16
+
npm install
17
+
npm run start
18
+
```
19
+
20
+
This example contains:
21
+
22
+
- The `urql` bindings and a React app with a client set up in [`src/client/index.js`](src/client/index.js)
23
+
- The `cacheExchange` from `@urql/exchange-graphcache` in [`src/client/index.js`](src/client/index.js)
24
+
- A links list and link creation in [`src/pages/Links.js`](src/pages/Links.js)
+14
-14
examples/with-multipart/README.md
+14
-14
examples/with-multipart/README.md
···
1
-
# Integrating with `@urql/exchange-multipart-fetch`'s multipartFetchExchange
1
+
# With Multipart File Upload
2
2
3
-
Integrating urql is as simple as:
3
+
This example shows `urql` in use with `@urql/exchange-multipart-fetch`'s `multipartFetchExchange`
4
+
to support file uploads in GraphQL. This largely follows the ["File Uploads" docs
5
+
page](https://formidable.com/open-source/urql/docs/advanced/persistence-and-uploads/)
6
+
and uses the [`trygql.formidable.dev/graphql/uploads-mock` schema](https://github.com/FormidableLabs/trygql).
4
7
5
-
1. Install packages [getting started](https://formidable.com/open-source/urql/docs/basics/react-preact/)
8
+
To run this example install dependencies and run the `start` script:
6
9
7
10
```sh
8
-
yarn add urql graphql
9
-
# or
10
-
npm install --save urql graphql
11
-
```
12
-
13
-
2. Add [multipart exchange](https://formidable.com/open-source/urql/docs/advanced/persistence-and-uploads/)
14
-
15
-
```yarn add @urql/exchange-multipart-fetch
11
+
yarn install
12
+
yarn run start
16
13
# or
17
-
npm install --save @urql/exchange-multipart-fetch
14
+
npm install
15
+
npm run start
18
16
```
19
17
20
-
3. Setting up the Client [here](src/App.js)
18
+
This example contains:
21
19
22
-
4. Execute the Mutation [here](src/pages/FileUpload.js)
20
+
- The `urql` bindings and a React app with a client set up in [`src/App.js`](src/App.js)
21
+
- The `multipartFetchExchange` from `@urql/exchange-multipart-fetch` in [`src/App.js`](src/App.js)
22
+
- A basic file upload form in [`src/pages/FileUpload.js`](src/pages/FileUpload.js)
+2
-8
examples/with-multipart/package.json
+2
-8
examples/with-multipart/package.json
···
1
1
{
2
-
"name": "react-urql-query",
3
-
"version": "1.0.0",
2
+
"name": "with-multipart",
3
+
"version": "0.0.0",
4
4
"private": true,
5
5
"dependencies": {
6
6
"@urql/exchange-multipart-fetch": "^0.1.11",
···
17
17
"build": "react-scripts build",
18
18
"test": "react-scripts test",
19
19
"eject": "react-scripts eject"
20
-
},
21
-
"eslintConfig": {
22
-
"extends": [
23
-
"react-app",
24
-
"react-app/jest"
25
-
]
26
20
},
27
21
"browserslist": {
28
22
"production": [
+3
-2
examples/with-multipart/src/App.js
+3
-2
examples/with-multipart/src/App.js
···
1
1
import { createClient, Provider } from "urql";
2
-
import { multipartFetchExchange } from '@urql/exchange-multipart-fetch';
2
+
import { multipartFetchExchange } from "@urql/exchange-multipart-fetch";
3
3
4
4
import FileUpload from "./pages/FileUpload";
5
5
6
6
const client = createClient({
7
-
url: "https://trygql.dev/graphql/uploads-mock",
7
+
url: "https://trygql.formidable.dev/graphql/uploads-mock",
8
8
exchanges: [multipartFetchExchange],
9
+
],
9
10
});
10
11
11
12
function App() {
+15
-1
examples/with-next/README.md
+15
-1
examples/with-next/README.md
···
1
-
# Integrating with Next
1
+
# With Next.js
2
+
3
+
This example shows `next-urql` and `urql` in use with Next.js as explained [in the "Next.js" section
4
+
on the "Server-side Rendering" docs
5
+
page](https://formidable.com/open-source/urql/docs/advanced/server-side-rendering/#nextjs).
6
+
7
+
To run this example install dependencies and run the `start` script:
8
+
9
+
```sh
10
+
yarn install
11
+
yarn run start
12
+
# or
13
+
npm install
14
+
npm run start
15
+
```
2
16
3
17
## getInitialProps
4
18
+2
-2
examples/with-next/package.json
+2
-2
examples/with-next/package.json
+1
-1
examples/with-next/pages/_app.js
+1
-1
examples/with-next/pages/_app.js
+1
-1
examples/with-next/pages/index.js
+1
-1
examples/with-next/pages/index.js
+1
-1
examples/with-next/pages/server.js
+1
-1
examples/with-next/pages/server.js
···
35
35
export async function getServerSideProps() {
36
36
const ssrCache = ssrExchange({ isClient: false });
37
37
const client = initUrqlClient({
38
-
url: "https://trygql.dev/graphql/basic-pokedex",
38
+
url: "https://trygql.formidable.dev/graphql/basic-pokedex",
39
39
exchanges: [dedupExchange, cacheExchange, ssrCache, fetchExchange]
40
40
}, false);
41
41
+1
-1
examples/with-next/pages/static.js
+1
-1
examples/with-next/pages/static.js
···
35
35
export async function getStaticProps() {
36
36
const ssrCache = ssrExchange({ isClient: false });
37
37
const client = initUrqlClient({
38
-
url: "https://trygql.dev/graphql/basic-pokedex",
38
+
url: "https://trygql.formidable.dev/graphql/basic-pokedex",
39
39
exchanges: [dedupExchange, cacheExchange, ssrCache, fetchExchange]
40
40
}, false);
41
41
+13
-7
examples/with-pagination/README.md
+13
-7
examples/with-pagination/README.md
···
1
-
# Integrating with React
1
+
# With Pagination (in React)
2
2
3
-
Integrating urql is as simple as:
3
+
This example shows how to implement infinite pagination with `urql` in your React UI code. It
4
+
renders several pages as fragments with one component managing the variables for the page queries.
5
+
This example is also reapplicable to other libraries, like Svelte or Vue.
4
6
5
-
1. Install packages [getting started](https://formidable.com/open-source/urql/docs/basics/react-preact/)
7
+
To run this example install dependencies and run the `start` script:
6
8
7
9
```sh
8
-
yarn add urql graphql
10
+
yarn install
11
+
yarn run start
9
12
# or
10
-
npm install --save urql graphql
13
+
npm install
14
+
npm run start
11
15
```
12
16
13
-
2. Setting up the Client [here](src/App.js)
17
+
This example contains:
14
18
15
-
3. Execute the Query [here](src/pages/PaginatedNpmSearch.js)
19
+
- The `urql` bindings and a React app with a client set up in [`src/App.js`](src/App.js)
20
+
- A managing component called `PaginatedNpmSearch` set up to render all pages in [`src/PaginatedNpmSearch.js`](src/PaginatedNpmSearch.js)
21
+
- A page component called `SearchResultPage` running page queries in [`src/PaginatedNpmSearch.js`](src/PaginatedNpmSearch.js)
+2
-8
examples/with-pagination/package.json
+2
-8
examples/with-pagination/package.json
···
1
1
{
2
-
"name": "react-urql-query",
3
-
"version": "1.0.0",
2
+
"name": "with-pagination",
3
+
"version": "0.0.0",
4
4
"private": true,
5
5
"dependencies": {
6
6
"graphql": "^15.5.0",
···
16
16
"build": "react-scripts build",
17
17
"test": "react-scripts test",
18
18
"eject": "react-scripts eject"
19
-
},
20
-
"eslintConfig": {
21
-
"extends": [
22
-
"react-app",
23
-
"react-app/jest"
24
-
]
25
19
},
26
20
"browserslist": {
27
21
"production": [
+1
-1
examples/with-pagination/src/App.js
+1
-1
examples/with-pagination/src/App.js
+9
-10
examples/with-pagination/src/pages/PaginatedNpmSearch.js
+9
-10
examples/with-pagination/src/pages/PaginatedNpmSearch.js
···
61
61
return (
62
62
<div>
63
63
{pageVariables.map((variables, i) => (
64
-
<SearchResultPage
65
-
key={"" + variables.after}
66
-
variables={variables}
67
-
isLastPage={i === pageVariables.length - 1}
68
-
onLoadMore={(after) =>
69
-
setPageVariables([...pageVariables, { after, first: limit, query }])
70
-
}
71
-
/>
72
-
)
73
-
)}
64
+
<SearchResultPage
65
+
key={"" + variables.after}
66
+
variables={variables}
67
+
isLastPage={i === pageVariables.length - 1}
68
+
onLoadMore={(after) =>
69
+
setPageVariables([...pageVariables, { after, first: limit, query }])
70
+
}
71
+
/>
72
+
))}
74
73
</div>
75
74
);
76
75
};
+1
-1
examples/with-react-native/App.js
+1
-1
examples/with-react-native/App.js
+10
-7
examples/with-react-native/README.md
+10
-7
examples/with-react-native/README.md
···
1
-
# Integrating with React Native
1
+
# With React Native
2
2
3
-
Integrating urql is as simple as:
3
+
This example shows `urql` in use with React Native.
4
4
5
-
1. Install packages [getting started](https://formidable.com/open-source/urql/docs/basics/react-preact/)
5
+
To run this example install dependencies and run the `start` script:
6
6
7
7
```sh
8
-
yarn add urql graphql
8
+
yarn install
9
+
yarn run start
9
10
# or
10
-
npm install --save urql graphql
11
+
npm install
12
+
npm run start
11
13
```
12
14
13
-
2. Setting up the Client [here](App.js)
15
+
This example contains:
14
16
15
-
3. Execute the Query [here](src/screens/PokemonList.js)
17
+
- The `urql` bindings and a React Native app with a client set up in [`src/App.js`](src/App.js)
18
+
- A query for pokémon in [`src/screens/PokemonList.js`](src/screens/PokemonList.js)
+3
-5
examples/with-react-native/package.json
+3
-5
examples/with-react-native/package.json
···
1
1
{
2
-
"name": "withreactnative",
3
-
"version": "0.0.1",
2
+
"name": "with-react-native",
3
+
"version": "0.0.0",
4
4
"private": true,
5
5
"scripts": {
6
6
"android": "react-native run-android",
7
7
"ios": "react-native run-ios",
8
-
"start": "react-native start",
9
-
"test": "jest",
10
-
"lint": "eslint ."
8
+
"start": "react-native start"
11
9
},
12
10
"dependencies": {
13
11
"graphql": "^15.5.0",
+11
-7
examples/with-react/README.md
+11
-7
examples/with-react/README.md
···
1
-
# Integrating with React
1
+
# With React
2
2
3
-
Integrating urql is as simple as:
3
+
This example shows `urql` in use with React, as explained on the ["React/Preact" page of the "Basics"
4
+
documentation.](https://formidable.com/open-source/urql/docs/basics/react-preact/)
4
5
5
-
1. Install packages [getting started](https://formidable.com/open-source/urql/docs/basics/react-preact/)
6
+
To run this example install dependencies and run the `start` script:
6
7
7
8
```sh
8
-
yarn add urql graphql
9
+
yarn install
10
+
yarn run start
9
11
# or
10
-
npm install --save urql graphql
12
+
npm install
13
+
npm run start
11
14
```
12
15
13
-
2. Setting up the Client [here](src/App.js)
16
+
This example contains:
14
17
15
-
3. Execute the Query [here](src/pages/PokemonList.js)
18
+
- The `urql` bindings and a React app with a client set up in [`src/App.js`](src/App.js)
19
+
- A query for pokémon in [`src/pages/PokemonList.js`](src/pages/PokemonList.js)
+2
-8
examples/with-react/package.json
+2
-8
examples/with-react/package.json
···
1
1
{
2
-
"name": "react-urql-query",
3
-
"version": "1.0.0",
2
+
"name": "with-react",
3
+
"version": "0.0.0",
4
4
"private": true,
5
5
"dependencies": {
6
6
"graphql": "^15.5.0",
···
16
16
"build": "react-scripts build",
17
17
"test": "react-scripts test",
18
18
"eject": "react-scripts eject"
19
-
},
20
-
"eslintConfig": {
21
-
"extends": [
22
-
"react-app",
23
-
"react-app/jest"
24
-
]
25
19
},
26
20
"browserslist": {
27
21
"production": [
+1
-1
examples/with-react/src/App.js
+1
-1
examples/with-react/src/App.js
+17
-13
examples/with-refresh-auth/README.md
+17
-13
examples/with-refresh-auth/README.md
···
1
-
# Integrating with `@urql/exchange-auth`'s authExchange
1
+
# With Refresh Authentication
2
2
3
-
Integrating urql is as simple as:
3
+
This example shows `urql` in use with `@urql/exchange-auth`'s `authExchange`
4
+
to support authentication token and refresh token logic. This largely follows the ["Authentication" docs
5
+
page](https://formidable.com/open-source/urql/docs/advanced/authentication/)
6
+
and uses the [`trygql.formidable.dev/graphql/web-collections` schema](https://github.com/FormidableLabs/trygql).
4
7
5
-
1. Install packages [getting started](https://formidable.com/open-source/urql/docs/basics/react-preact/)
8
+
To run this example install dependencies and run the `start` script:
6
9
7
10
```sh
8
-
yarn add urql graphql
11
+
yarn install
12
+
yarn run start
9
13
# or
10
-
npm install --save urql graphql
14
+
npm install
15
+
npm run start
11
16
```
12
17
13
-
2. Install [authExchange](https://formidable.com/open-source/urql/docs/advanced/authentication/)
18
+
This example contains:
14
19
15
-
```sh
16
-
yarn add @urql/exchange-auth
17
-
# or
18
-
npm install --save @urql/exchange-auth
19
-
```
20
-
21
-
3. Setting up the Client and setup the Auth flow [here](src/App.js)
20
+
- The `urql` bindings and a React app set up in [`src/App.js`](src/App.js)
21
+
- Some authentication glue code to store the tokens in [`src/auth/Store.js`](src/auth/Store.js)
22
+
- The `Client` and the `authExchange` from `@urql/exchange-auth` set up in [`src/client/index.js`](src/client/index.js)
23
+
- A basic login form in [`src/pages/LoginForm.js`](src/pages/LoginForm.js)
24
+
- And a basic login guard on [`src/pages/Home.js`](src/pages/Home.js)
25
+
(Note: This isn't using a query in this particular component, since this is just an example)
+2
-8
examples/with-refresh-auth/package.json
+2
-8
examples/with-refresh-auth/package.json
···
1
1
{
2
-
"name": "react-urql-query",
3
-
"version": "1.0.0",
2
+
"name": "with-refresh-auth",
3
+
"version": "0.0.0",
4
4
"private": true,
5
5
"dependencies": {
6
6
"@urql/exchange-auth": "^0.1.2",
···
17
17
"build": "react-scripts build",
18
18
"test": "react-scripts test",
19
19
"eject": "react-scripts eject"
20
-
},
21
-
"eslintConfig": {
22
-
"extends": [
23
-
"react-app",
24
-
"react-app/jest"
25
-
]
26
20
},
27
21
"browserslist": {
28
22
"production": [
+1
-1
examples/with-refresh-auth/src/client/index.js
+1
-1
examples/with-refresh-auth/src/client/index.js
+24
examples/with-retry/README.md
+24
examples/with-retry/README.md
···
21
21
3. Setting up the Client and adding the `retryExchange` [here](src/App.js)
22
22
23
23
4. Execute the Query [here](src/pages/Color.js)
24
+
25
+
# With Retry
26
+
27
+
This example shows `urql` in use with `@urql/exchange-retry`'s `retryExchange`
28
+
to implement retrying failed operations. This largely follows the ["Retrying Operations" docs
29
+
page](https://formidable.com/open-source/urql/docs/advanced/retry-operations/)
30
+
and uses the [`trygql.formidable.dev/graphql/intermittent-colors`
31
+
schema](https://github.com/FormidableLabs/trygql), which emits a special `NO_SOUP` error randomly.
32
+
33
+
To run this example install dependencies and run the `start` script:
34
+
35
+
```sh
36
+
yarn install
37
+
yarn run start
38
+
# or
39
+
npm install
40
+
npm run start
41
+
```
42
+
43
+
This example contains:
44
+
45
+
- The `urql` bindings and a React app with a client set up in [`src/App.js`](src/App.js)
46
+
- The `retryExchange` from `@urql/exchange-retry` in [`src/App.js`](src/App.js)
47
+
- A random colour query in [`src/pages/Color.js`](src/pages/Color.js)
+2
-8
examples/with-retry/package.json
+2
-8
examples/with-retry/package.json
···
1
1
{
2
-
"name": "urlq-retry-query",
3
-
"version": "1.0.0",
2
+
"name": "with-retry",
3
+
"version": "0.0.0",
4
4
"private": true,
5
5
"dependencies": {
6
6
"@urql/exchange-retry": "^0.2.0",
···
17
17
"build": "react-scripts build",
18
18
"test": "react-scripts test",
19
19
"eject": "react-scripts eject"
20
-
},
21
-
"eslintConfig": {
22
-
"extends": [
23
-
"react-app",
24
-
"react-app/jest"
25
-
]
26
20
},
27
21
"browserslist": {
28
22
"production": [
+5
-3
examples/with-retry/src/App.js
+5
-3
examples/with-retry/src/App.js
···
4
4
import Color from "./pages/Color";
5
5
6
6
const client = createClient({
7
-
url: "https://trygql.dev/graphql/intermittent-colors",
7
+
url: "https://trygql.formidable.dev/graphql/intermittent-colors",
8
8
exchanges: [
9
9
retryExchange({
10
10
maxNumberAttempts: 5,
11
11
retryIf: error => {
12
-
return error.graphQLErrors.length || error.networkError;
12
+
// NOTE: With this deemo schema we have a specific random error to look out for:
13
+
return error.graphQLErrors.some(x => x.extensions?.code === 'NO_SOUP')
14
+
|| !!error.networkError;
13
15
}
14
-
}), // Use the retryExchange factory to add a new exchange,
16
+
}),
15
17
fetchExchange
16
18
],
17
19
});
+11
-7
examples/with-svelte/README.md
+11
-7
examples/with-svelte/README.md
···
1
-
# Integrating with React
1
+
# With Svelte
2
2
3
-
Integrating urql is as simple as:
3
+
This example shows `@urql/svelte` in use with Svelte, as explained on the ["Svelte" page of the "Basics"
4
+
documentation.](https://formidable.com/open-source/urql/docs/basics/svelte/)
4
5
5
-
1. Install packages [getting started](https://formidable.com/open-source/urql/docs/basics/svelte/)
6
+
To run this example install dependencies and run the `start` script:
6
7
7
8
```sh
8
-
yarn add @urql/svelte graphql
9
+
yarn install
10
+
yarn run start
9
11
# or
10
-
npm install --save @urql/svelte graphql
12
+
npm install
13
+
npm run start
11
14
```
12
15
13
-
2. Setting up the Client [here](src/App.svelte)
16
+
This example contains:
14
17
15
-
3. Execute the Query [here](src/App.svelte)
18
+
- The `@urql/svelte` bindings with a client set up in [`src/App.svelte`](src/App.svelte)
19
+
- A query for pokémon in [`src/PokemonList.svelte`](src/pages/PokemonList.svelte)
+2
-2
examples/with-svelte/package.json
+2
-2
examples/with-svelte/package.json
+1
-1
examples/with-svelte/src/App.svelte
+1
-1
examples/with-svelte/src/App.svelte
+20
examples/with-vue3/README.md
+20
examples/with-vue3/README.md
···
1
+
# With Vue 3
2
+
3
+
This example shows `@urql/vue` in use with Vue 3, as explained on the ["Vue" page of the "Basics"
4
+
documentation.](https://formidable.com/open-source/urql/docs/basics/vue/)
5
+
6
+
To run this example install dependencies and run the `start` script:
7
+
8
+
```sh
9
+
yarn install
10
+
yarn run start
11
+
# or
12
+
npm install
13
+
npm run start
14
+
```
15
+
16
+
This example contains:
17
+
18
+
- The `@urql/vue` bindings with a client set up in [`src/App.vue`](src/App.vue)
19
+
- A suspense loading boundary in the `App` component in [`src/App.vue`](src/App.vue)
20
+
- A query for pokémon in [`src/PokemonList.vue`](src/pages/PokemonList.vue)
+1
-1
examples/with-vue3/package.json
+1
-1
examples/with-vue3/package.json
+1
-1
examples/with-vue3/src/App.vue
+1
-1
examples/with-vue3/src/App.vue