Mirror: The highly customizable and versatile GraphQL client with which you add on features like normalized caching as you grow.
docs(workspace): Add additional sandbox links and links to examples (#3320)
authored by
Phil Pluckthun
and committed by
GitHub
c37a0fc3
d3eb256d
+646
-21
+1
-1
.github/ISSUE_TEMPLATE/bug_report.yaml
+1
-1
.github/ISSUE_TEMPLATE/bug_report.yaml
···
22
22
id: reproduction
23
23
attributes:
24
24
label: Reproduction
25
-
description: Please provide a link via [codesandbox](https://codesandbox.io/s/urql-issue-template-client-iui0o) or a link to a repo that can reproduce the problem you ran into. A [minimal reproduction](https://stackoverflow.com/help/minimal-reproducible-example) is required. If a report is vague (e.g. just a generic error message) and if no reproduction is provided the issue will be auto-closed.
25
+
description: Please provide a link to a reproduction. Templates can be found in the [examples folder](https://github.com/urql-graphql/urql/tree/main/examples). A [minimal reproduction](https://stackoverflow.com/help/minimal-reproducible-example) is required. If a report is vague (e.g. just a generic error message) and if no reproduction is provided the issue will be auto-closed.
26
26
placeholder: Reproduction
27
27
validations:
28
28
required: true
+7
CONTRIBUTING.md
+7
CONTRIBUTING.md
···
30
30
instead.** Following this makes it very clear whether it's a known behavior, an unexpected issue,
31
31
or an undocumented quirk.
32
32
33
+
We do ask that issues _aren’t_ created for questions, or where a bug is likely to be either caused
34
+
by misusage or misconfiguration. In short, if you can’t provide a reproduction of the issue, then
35
+
it may be the case that you’ve got a question instead.
36
+
37
+
If you need a template for creating a reproduction, all of our examples can be opened in isolated
38
+
sandboxes or modified as you see fit: https://github.com/urql-graphql/urql/tree/main/examples
39
+
33
40
### How do I propose changes?
34
41
35
42
We follow an **RFC proposal process**. This allows anyone to propose a new feature or a change, and
+2
docs/advanced/authentication.md
+2
docs/advanced/authentication.md
···
10
10
The purpose of the [`authExchange`](../api/auth-exchange.md) is to provide a flexible API that facilitates the typical
11
11
JWT-based authentication flow.
12
12
13
+
> **Note:** [You can find a code example for `@urql/exchange-auth` in an example in the `urql` repository.](https://github.com/urql-graphql/urql/tree/main/examples/with-refresh-auth)
14
+
13
15
## Typical Authentication Flow
14
16
15
17
**Initial login** — the user opens the application and authenticates for the first time. They enter their credentials and receive an auth token.
+4
docs/advanced/persistence-and-uploads.md
+4
docs/advanced/persistence-and-uploads.md
···
32
32
subscription exchanges by adding metadata for persisted queries to each GraphQL
33
33
request by modifying the `extensions` object of operations.
34
34
35
+
> **Note:** [You can find a code example for `@urql/exchange-persisted` in an example in the `urql` repository.](https://github.com/urql-graphql/urql/tree/main/examples/with-apq)
36
+
35
37
### Installation & Setup
36
38
37
39
First install `@urql/exchange-persisted` alongside `urql`:
···
131
133
132
134
> **Note:** Previously, this worked by installing the `@urql/multipart-fetch-exchange` package.
133
135
> however, this package has been deprecated and file uploads are now built into `@urql/core@4`.
136
+
137
+
[You can find a code example for file uploads in an example in the `urql` repository.](https://github.com/urql-graphql/urql/tree/main/examples/with-multipart)
+2
docs/advanced/retry-operations.md
+2
docs/advanced/retry-operations.md
···
9
9
retry only network errors, but we can specify additional options to add
10
10
functionality.
11
11
12
+
> **Note:** [You can find a code example for `@urql/exchange-retry` in an example in the `urql` repository.](https://github.com/urql-graphql/urql/tree/main/examples/with-retry)
13
+
12
14
## Installation and Setup
13
15
14
16
First install `@urql/exchange-retry` alongside `urql`:
+25
-2
docs/advanced/subscriptions.md
+25
-2
docs/advanced/subscriptions.md
···
50
50
[Observable spec](https://github.com/tc39/proposal-observable), which comes down to having an
51
51
object with a `.subscribe()` method accepting an observer.
52
52
53
-
## Setting up `graphql-ws`
53
+
### Setting up `graphql-ws`
54
54
55
55
For backends supporting `graphql-ws`, we recommend using the [graphql-ws](https://github.com/enisdenjo/graphql-ws) client.
56
56
···
88
88
89
89
[Read more on the `graphql-ws` README.](https://github.com/enisdenjo/graphql-ws/blob/master/README.md)
90
90
91
-
## Setting up `subscriptions-transport-ws`
91
+
### Setting up `subscriptions-transport-ws`
92
92
93
93
For backends supporting `subscriptions-transport-ws`, [Apollo's `subscriptions-transport-ws`
94
94
package](https://github.com/apollographql/subscriptions-transport-ws) can be used.
···
118
118
we return to the `subscriptionExchange` inside `forwardSubscription`.
119
119
120
120
[Read more about `subscription-transport-ws` on its README.](https://github.com/apollographql/subscriptions-transport-ws/blob/master/README.md)
121
+
122
+
### Using `fetch` for subscriptions
123
+
124
+
Some GraphQL backends (for example GraphQL Yoga) support built-in transport protocols that
125
+
can execute subscriptions via a simple HTTP fetch call.
126
+
In fact, this is how `@defer` and `@stream` directives are supported. These transports can
127
+
also be used for subscriptions.
128
+
129
+
```js
130
+
import { Client, cacheExchange, fetchExchange, subscriptionExchange } from 'urql';
131
+
132
+
const client = new Client({
133
+
url: '/graphql',
134
+
fetchSubscriptions: true,
135
+
exchanges: [cacheExchange, fetchExchange],
136
+
});
137
+
```
138
+
139
+
In this example, we only need to enable `fetchSubscriptions: true` on the `Client`, and the
140
+
`fetchExchange` will be used to send subscriptions to the API. If your API supports this transport,
141
+
it will stream results back to the `fetchExchange`.
142
+
143
+
[You can find a code example of subscriptions via `fetch` in an example in the `urql` repository.](https://github.com/urql-graphql/urql/tree/main/examples/with-subscriptions-via-fetch)
121
144
122
145
## React & Preact
123
146
+366
-17
examples/README.md
+366
-17
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 pagination with `urql` in UI code. |
9
-
| [`with-infinite-pagination`](./with-infinite-pagination) | Shows how to generically set up infinite scrolling pagination with `urql` in UI code. |
10
-
| [`with-apq`](./with-apq) | Shows Automatic Persisted Queries with `@urql/exchange-persisted-fetch`. |
11
-
| [`with-graphcache-updates`](./with-graphcache-updates) | Shows manual cache updates with `@urql/exchange-graphcache`. |
12
-
| [`with-graphcache-pagination`](./with-graphcache-pagination) | Shows the automatic infinite pagination helpers from `@urql/exchange-graphcache`. |
13
-
| [`with-multipart`](./with-multipart) | Shows file upload support with `@urql/exchange-multipart-fetch`. |
14
-
| [`with-refresh-auth`](./with-refresh-auth) | Shows an example of authentication with refresh tokens using `@urql/exchange-auth`. |
15
-
| [`with-retry`](./with-retry) | Shows how to set up `@urql/exchange-retry` for retrying failed operations. |
16
-
| [`with-defer-stream-directives`](./with-defer-stream-directives) | Demonstrates `urql` and `@urql/exchange-graphcache` with built-in support for `@defer` and `@stream`. |
17
-
| [`with-subscriptions-via-fetch`](./with-subscriptions-via-fetch) | Demonstrates `urql` executing subscriptions with a GraphQL Yoga API via the `fetchExchange`. |
1
+
<table>
2
+
<thead>
3
+
<tr>
4
+
<th>Example</th>
5
+
<th></th>
6
+
<th></th>
7
+
</tr>
8
+
</thead>
9
+
<tbody>
10
+
11
+
<tr>
12
+
<td>
13
+
<a href="./with-react"><strong>with-react</strong></a><br />
14
+
</td>
15
+
<td>
16
+
Shows a basic query in <code>urql</code> with React.
17
+
</td>
18
+
<td>
19
+
<a href="https://stackblitz.com/github/urql-graphql/urql/tree/main/examples/with-react">
20
+
<img
21
+
alt="Open in StackBlitz"
22
+
src="https://img.shields.io/badge/open_in_stackblitz-1269D3?logo=stackblitz"
23
+
/>
24
+
</a>
25
+
<a href="https://codesandbox.io/p/sandbox/github/urql-graphql/urql/tree/main/examples/with-react">
26
+
<img
27
+
alt="Open in CodeSandbox"
28
+
src="https://img.shields.io/badge/open_in_codesandbox-151515?logo=codesandbox"
29
+
/>
30
+
</a>
31
+
</td>
32
+
</tr>
33
+
34
+
<tr>
35
+
<td>
36
+
<a href="./with-react-native"><strong>with-react-native</strong></a><br />
37
+
</td>
38
+
<td>
39
+
Shows a basic query in <code>urql</code> with React Native.
40
+
</td>
41
+
<td>
42
+
<a href="https://stackblitz.com/github/urql-graphql/urql/tree/main/examples/with-react-native">
43
+
<img
44
+
alt="Open in StackBlitz"
45
+
src="https://img.shields.io/badge/open_in_stackblitz-1269D3?logo=stackblitz"
46
+
/>
47
+
</a>
48
+
<a href="https://codesandbox.io/p/sandbox/github/urql-graphql/urql/tree/main/examples/with-react-native">
49
+
<img
50
+
alt="Open in CodeSandbox"
51
+
src="https://img.shields.io/badge/open_in_codesandbox-151515?logo=codesandbox"
52
+
/>
53
+
</a>
54
+
</td>
55
+
</tr>
56
+
57
+
<tr>
58
+
<td>
59
+
<a href="./with-svelte"><strong>with-svelte</strong></a><br />
60
+
</td>
61
+
<td>
62
+
Shows a basic query in <code>@urql/svelte</code> with Svelte.
63
+
</td>
64
+
<td>
65
+
<a href="https://stackblitz.com/github/urql-graphql/urql/tree/main/examples/with-svelte">
66
+
<img
67
+
alt="Open in StackBlitz"
68
+
src="https://img.shields.io/badge/open_in_stackblitz-1269D3?logo=stackblitz"
69
+
/>
70
+
</a>
71
+
<a
72
+
href="https://codesandbox.io/p/sandbox/github/urql-graphql/urql/tree/main/examples/with-svelte">
73
+
<img
74
+
alt="Open in CodeSandbox"
75
+
src="https://img.shields.io/badge/open_in_codesandbox-151515?logo=codesandbox"
76
+
/>
77
+
</a>
78
+
</td>
79
+
</tr>
80
+
81
+
<tr>
82
+
<td>
83
+
<a href="./with-vue3"><strong>with-vue3</strong></a><br />
84
+
</td>
85
+
<td>
86
+
Shows a basic query in <code>@urql/vue</code> with Vue 3.
87
+
</td>
88
+
<td>
89
+
<a href="https://stackblitz.com/github/urql-graphql/urql/tree/main/examples/with-vue3">
90
+
<img
91
+
alt="Open in StackBlitz"
92
+
src="https://img.shields.io/badge/open_in_stackblitz-1269D3?logo=stackblitz"
93
+
/>
94
+
</a>
95
+
<a href="https://codesandbox.io/p/sandbox/github/urql-graphql/urql/tree/main/examples/with-vue3">
96
+
<img
97
+
alt="Open in CodeSandbox"
98
+
src="https://img.shields.io/badge/open_in_codesandbox-151515?logo=codesandbox"
99
+
/>
100
+
</a>
101
+
</td>
102
+
</tr>
103
+
104
+
<tr>
105
+
<td>
106
+
<a href="./with-next"><strong>with-next</strong></a><br />
107
+
</td>
108
+
<td>
109
+
Shows a basic query in <code>next-urql</code> with Next.js.
110
+
</td>
111
+
<td>
112
+
<a href="https://stackblitz.com/github/urql-graphql/urql/tree/main/examples/with-next">
113
+
<img
114
+
alt="Open in StackBlitz"
115
+
src="https://img.shields.io/badge/open_in_stackblitz-1269D3?logo=stackblitz"
116
+
/>
117
+
</a>
118
+
<a href="https://codesandbox.io/p/sandbox/github/urql-graphql/urql/tree/main/examples/with-next">
119
+
<img
120
+
alt="Open in CodeSandbox"
121
+
src="https://img.shields.io/badge/open_in_codesandbox-151515?logo=codesandbox"
122
+
/>
123
+
</a>
124
+
</td>
125
+
</tr>
126
+
127
+
<tr>
128
+
<td>
129
+
<a href="./with-pagination"><strong>with-pagination</strong></a><br />
130
+
</td>
131
+
<td>
132
+
Shows how to generically set up pagination with <code>urql</code> in UI code.
133
+
</td>
134
+
<td>
135
+
<a href="https://stackblitz.com/github/urql-graphql/urql/tree/main/examples/with-pagination">
136
+
<img
137
+
alt="Open in StackBlitz"
138
+
src="https://img.shields.io/badge/open_in_stackblitz-1269D3?logo=stackblitz"
139
+
/>
140
+
</a>
141
+
<a
142
+
href="https://codesandbox.io/p/sandbox/github/urql-graphql/urql/tree/main/examples/with-pagination">
143
+
<img
144
+
alt="Open in CodeSandbox"
145
+
src="https://img.shields.io/badge/open_in_codesandbox-151515?logo=codesandbox"
146
+
/>
147
+
</a>
148
+
</td>
149
+
</tr>
150
+
151
+
<tr>
152
+
<td>
153
+
<a href="./with-infinite-pagination"><strong>with-infinite-pagination</strong></a><br />
154
+
</td>
155
+
<td>
156
+
Shows how to generically set up infinite scrolling pagination with <code>urql</code> in UI code.
157
+
</td>
158
+
<td>
159
+
<a href="https://stackblitz.com/github/urql-graphql/urql/tree/main/examples/with-infinite-pagination">
160
+
<img
161
+
alt="Open in StackBlitz"
162
+
src="https://img.shields.io/badge/open_in_stackblitz-1269D3?logo=stackblitz"
163
+
/>
164
+
</a>
165
+
<a
166
+
href="https://codesandbox.io/p/sandbox/github/urql-graphql/urql/tree/main/examples/with-infinite-pagination">
167
+
<img
168
+
alt="Open in CodeSandbox"
169
+
src="https://img.shields.io/badge/open_in_codesandbox-151515?logo=codesandbox"
170
+
/>
171
+
</a>
172
+
</td>
173
+
</tr>
174
+
175
+
<tr>
176
+
<td>
177
+
<a href="./with-apq"><strong>with-apq</strong></a><br />
178
+
</td>
179
+
<td>
180
+
Shows Automatic Persisted Queries with <code>@urql/exchange-persisted</code>.
181
+
</td>
182
+
<td>
183
+
<a href="https://stackblitz.com/github/urql-graphql/urql/tree/main/examples/with-apq">
184
+
<img
185
+
alt="Open in StackBlitz"
186
+
src="https://img.shields.io/badge/open_in_stackblitz-1269D3?logo=stackblitz"
187
+
/>
188
+
</a>
189
+
<a
190
+
href="https://codesandbox.io/p/sandbox/github/urql-graphql/urql/tree/main/examples/with-apq">
191
+
<img
192
+
alt="Open in CodeSandbox"
193
+
src="https://img.shields.io/badge/open_in_codesandbox-151515?logo=codesandbox"
194
+
/>
195
+
</a>
196
+
</td>
197
+
</tr>
198
+
199
+
<tr>
200
+
<td>
201
+
<a href="./with-graphcache-updates"><strong>with-graphcache-updates</strong></a><br />
202
+
</td>
203
+
<td>
204
+
Shows manual cache updates with <code>@urql/exchange-graphcache</code>.
205
+
</td>
206
+
<td>
207
+
<a href="https://stackblitz.com/github/urql-graphql/urql/tree/main/examples/with-graphcache-updates">
208
+
<img
209
+
alt="Open in StackBlitz"
210
+
src="https://img.shields.io/badge/open_in_stackblitz-1269D3?logo=stackblitz"
211
+
/>
212
+
</a>
213
+
<a href="https://codesandbox.io/p/sandbox/github/urql-graphql/urql/tree/main/examples/with-graphcache-updates">
214
+
<img
215
+
alt="Open in CodeSandbox"
216
+
src="https://img.shields.io/badge/open_in_codesandbox-151515?logo=codesandbox"
217
+
/>
218
+
</a>
219
+
</td>
220
+
</tr>
221
+
222
+
<tr>
223
+
<td>
224
+
<a href="./with-graphcache-pagination"><strong>with-graphcache-pagination</strong></a><br />
225
+
</td>
226
+
<td>
227
+
Shows the automatic infinite pagination helpers from <code>@urql/exchange-graphcache</code>.
228
+
</td>
229
+
<td>
230
+
<a
231
+
href="https://stackblitz.com/github/urql-graphql/urql/tree/main/examples/with-graphcache-pagination">
232
+
<img
233
+
alt="Open in StackBlitz"
234
+
src="https://img.shields.io/badge/open_in_stackblitz-1269D3?logo=stackblitz"
235
+
/>
236
+
</a>
237
+
<a href="https://codesandbox.io/p/sandbox/github/urql-graphql/urql/tree/main/examples/with-graphcache-pagination">
238
+
<img
239
+
alt="Open in CodeSandbox"
240
+
src="https://img.shields.io/badge/open_in_codesandbox-151515?logo=codesandbox"
241
+
/>
242
+
</a>
243
+
</td>
244
+
</tr>
245
+
246
+
<tr>
247
+
<td>
248
+
<a href="./with-multipart"><strong>with-multipart</strong></a><br />
249
+
</td>
250
+
<td>
251
+
Shows file upload support integrated in <code>@urql/core</code>.
252
+
</td>
253
+
<td>
254
+
<a href="https://stackblitz.com/github/urql-graphql/urql/tree/main/examples/with-multipart">
255
+
<img
256
+
alt="Open in StackBlitz"
257
+
src="https://img.shields.io/badge/open_in_stackblitz-1269D3?logo=stackblitz"
258
+
/>
259
+
</a>
260
+
<a href="https://codesandbox.io/p/sandbox/github/urql-graphql/urql/tree/main/examples/with-multipart">
261
+
<img
262
+
alt="Open in CodeSandbox"
263
+
src="https://img.shields.io/badge/open_in_codesandbox-151515?logo=codesandbox"
264
+
/>
265
+
</a>
266
+
</td>
267
+
</tr>
268
+
269
+
<tr>
270
+
<td>
271
+
<a href="./with-refresh-auth"><strong>with-refresh-auth</strong></a><br />
272
+
</td>
273
+
<td>
274
+
Shows authentication with refresh tokens using <code>@urql/exchange-auth</code>.
275
+
</td>
276
+
<td>
277
+
<a href="https://stackblitz.com/github/urql-graphql/urql/tree/main/examples/with-refresh-auth">
278
+
<img
279
+
alt="Open in StackBlitz"
280
+
src="https://img.shields.io/badge/open_in_stackblitz-1269D3?logo=stackblitz"
281
+
/>
282
+
</a>
283
+
<a href="https://codesandbox.io/p/sandbox/github/urql-graphql/urql/tree/main/examples/with-refresh-auth">
284
+
<img
285
+
alt="Open in CodeSandbox"
286
+
src="https://img.shields.io/badge/open_in_codesandbox-151515?logo=codesandbox"
287
+
/>
288
+
</a>
289
+
</td>
290
+
</tr>
291
+
292
+
<tr>
293
+
<td>
294
+
<a href="./with-retry"><strong>with-retry</strong></a><br />
295
+
</td>
296
+
<td>
297
+
Shows retrying of failed operations with <code>@urql/exchange-retry</code>.
298
+
</td>
299
+
<td>
300
+
<a href="https://stackblitz.com/github/urql-graphql/urql/tree/main/examples/with-retry">
301
+
<img
302
+
alt="Open in StackBlitz"
303
+
src="https://img.shields.io/badge/open_in_stackblitz-1269D3?logo=stackblitz"
304
+
/>
305
+
</a>
306
+
<a href="https://codesandbox.io/p/sandbox/github/urql-graphql/urql/tree/main/examples/with-retry">
307
+
<img
308
+
alt="Open in CodeSandbox"
309
+
src="https://img.shields.io/badge/open_in_codesandbox-151515?logo=codesandbox"
310
+
/>
311
+
</a>
312
+
</td>
313
+
</tr>
314
+
315
+
<tr>
316
+
<td>
317
+
<a href="./with-defer-stream-directives"><strong>with-defer-stream-directives</strong></a><br />
318
+
</td>
319
+
<td>
320
+
Demonstrates <code>urql</code> and <code>@urql/exchange-graphcache</code> with built-in support for <code>@defer</code> and <code>@stream</code>.
321
+
</td>
322
+
<td>
323
+
<a
324
+
href="https://stackblitz.com/github/urql-graphql/urql/tree/main/examples/with-defer-stream-directives">
325
+
<img
326
+
alt="Open in StackBlitz"
327
+
src="https://img.shields.io/badge/open_in_stackblitz-1269D3?logo=stackblitz"
328
+
/>
329
+
</a>
330
+
<a
331
+
href="https://codesandbox.io/p/sandbox/github/urql-graphql/urql/tree/main/examples/with-defer-stream-directives">
332
+
<img
333
+
alt="Open in CodeSandbox"
334
+
src="https://img.shields.io/badge/open_in_codesandbox-151515?logo=codesandbox"
335
+
/>
336
+
</a>
337
+
</td>
338
+
</tr>
339
+
340
+
<tr>
341
+
<td>
342
+
<a href="./with-subscriptions-via-fetch"><strong>with-subscriptions-via-fetch</strong></a><br />
343
+
</td>
344
+
<td>
345
+
Demonstrates <code>@urql/core</code>'s built-in support for executing subscriptions with a GraphQL Yoga API via the <code>fetchExchange</code>.
346
+
</td>
347
+
<td>
348
+
<a
349
+
href="https://stackblitz.com/github/urql-graphql/urql/tree/main/examples/with-subscriptions-via-fetch">
350
+
<img
351
+
alt="Open in StackBlitz"
352
+
src="https://img.shields.io/badge/open_in_stackblitz-1269D3?logo=stackblitz"
353
+
/>
354
+
</a>
355
+
<a
356
+
href="https://codesandbox.io/p/sandbox/github/urql-graphql/urql/tree/main/examples/with-subscriptions-via-fetch">
357
+
<img
358
+
alt="Open in CodeSandbox"
359
+
src="https://img.shields.io/badge/open_in_codesandbox-151515?logo=codesandbox"
360
+
/>
361
+
</a>
362
+
</td>
363
+
</tr>
364
+
365
+
</tbody>
366
+
</table>
+15
examples/with-apq/README.md
+15
examples/with-apq/README.md
···
1
1
# With Automatic Persisted Queries
2
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
+
3
18
This example shows `urql` in use with `@urql/exchange-persisted-fetch`'s `persistedFetchExchange`
4
19
to support [Automatic Persisted
5
20
Queries](https://www.apollographql.com/docs/apollo-server/performance/apq/). This largely follows
+1
-1
examples/with-apq/package.json
+1
-1
examples/with-apq/package.json
+16
examples/with-defer-stream-directives/README.md
+16
examples/with-defer-stream-directives/README.md
···
1
1
# With `@defer` / `@stream` Directives
2
2
3
+
<p>
4
+
<a href="https://stackblitz.com/github/urql-graphql/urql/tree/main/examples/with-defer-stream-directives">
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
11
+
href="https://codesandbox.io/p/sandbox/github/urql-graphql/urql/tree/main/examples/with-defer-stream-directives">
12
+
<img
13
+
alt="Open in CodeSandbox"
14
+
src="https://img.shields.io/badge/open_in_codesandbox-151515?logo=codesandbox&style=for-the-badge"
15
+
/>
16
+
</a>
17
+
</p>
18
+
3
19
This example shows `urql` in use [with `@defer` and `@stream`
4
20
directives](https://graphql.org/blog/2020-12-08-improving-latency-with-defer-and-stream-directives)
5
21
in GraphQL.
+17
examples/with-graphcache-pagination/README.md
+17
examples/with-graphcache-pagination/README.md
···
1
1
# With Graphcache's Pagination
2
2
3
+
<p>
4
+
<a
5
+
href="https://stackblitz.com/github/urql-graphql/urql/tree/main/examples/with-graphcache-pagination">
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-pagination">
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
+
3
20
This example shows `urql` in use with `@urql/exchange-graphcache`'s infinite pagination helpers to
4
21
merge several pages of a Relay-compliant schema into an infinite list.
5
22
This largely follows the ["Pagination" section on the "Local Resolvers" docs
+17
examples/with-graphcache-updates/README.md
+17
examples/with-graphcache-updates/README.md
···
1
1
# With Graphcache's Pagination
2
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
+
3
20
This example shows `urql` in use with `@urql/exchange-graphcache` and demonstrates a manual cache
4
21
update, as explained in [the "Cache Updates" docs page](https://formidable.com/open-source/urql/docs/graphcache/cache-updates/).
5
22
This example uses the [`trygql.formidable.dev/graphql/web-collections`
+17
examples/with-infinite-pagination/README.md
+17
examples/with-infinite-pagination/README.md
···
1
1
# With Infinite Pagination (in React)
2
2
3
+
<p>
4
+
<a
5
+
href="https://stackblitz.com/github/urql-graphql/urql/tree/main/examples/with-infinite-pagination">
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-infinite-pagination">
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
+
3
20
This example shows how to implement **infinite scroll** pagination with `urql`
4
21
in your React UI code.
5
22
+16
examples/with-multipart/README.md
+16
examples/with-multipart/README.md
···
1
1
# With Multipart File Upload
2
2
3
+
<p>
4
+
<a href="https://stackblitz.com/github/urql-graphql/urql/tree/main/examples/with-multipart">
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
11
+
href="https://codesandbox.io/p/sandbox/github/urql-graphql/urql/tree/main/examples/with-multipart">
12
+
<img
13
+
alt="Open in CodeSandbox"
14
+
src="https://img.shields.io/badge/open_in_codesandbox-151515?logo=codesandbox&style=for-the-badge"
15
+
/>
16
+
</a>
17
+
</p>
18
+
3
19
This example shows `urql` in use with `@urql/exchange-multipart-fetch`'s `multipartFetchExchange`
4
20
to support file uploads in GraphQL. This largely follows the ["File Uploads" docs
5
21
page](https://formidable.com/open-source/urql/docs/advanced/persistence-and-uploads/)
+15
examples/with-next/README.md
+15
examples/with-next/README.md
···
1
1
# With Next.js
2
2
3
+
<p>
4
+
<a href="https://stackblitz.com/github/urql-graphql/urql/tree/main/examples/with-next">
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-next">
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
+
3
18
This example shows `next-urql` and `urql` in use with Next.js as explained [in the "Next.js" section
4
19
on the "Server-side Rendering" docs
5
20
page](https://formidable.com/open-source/urql/docs/advanced/server-side-rendering/#nextjs).
+16
examples/with-pagination/README.md
+16
examples/with-pagination/README.md
···
1
1
# With Pagination (in React)
2
2
3
+
<p>
4
+
<a href="https://stackblitz.com/github/urql-graphql/urql/tree/main/examples/with-pagination">
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
11
+
href="https://codesandbox.io/p/sandbox/github/urql-graphql/urql/tree/main/examples/with-pagination">
12
+
<img
13
+
alt="Open in CodeSandbox"
14
+
src="https://img.shields.io/badge/open_in_codesandbox-151515?logo=codesandbox&style=for-the-badge"
15
+
/>
16
+
</a>
17
+
</p>
18
+
3
19
This example shows how to implement pagination with `urql` in your React UI code.
4
20
5
21
It renders several pages as fragments with one component managing the variables
+16
examples/with-react-native/README.md
+16
examples/with-react-native/README.md
···
1
1
# With React Native
2
2
3
+
<p>
4
+
<a href="https://stackblitz.com/github/urql-graphql/urql/tree/main/examples/with-react-native">
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
11
+
href="https://codesandbox.io/p/sandbox/github/urql-graphql/urql/tree/main/examples/with-react-native">
12
+
<img
13
+
alt="Open in CodeSandbox"
14
+
src="https://img.shields.io/badge/open_in_codesandbox-151515?logo=codesandbox&style=for-the-badge"
15
+
/>
16
+
</a>
17
+
</p>
18
+
3
19
This example shows `urql` in use with React Native.
4
20
5
21
To run this example install dependencies and run the `start` script:
+15
examples/with-react/README.md
+15
examples/with-react/README.md
···
1
1
# With React
2
2
3
+
<p>
4
+
<a href="https://stackblitz.com/github/urql-graphql/urql/tree/main/examples/with-react">
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-react">
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
+
3
18
This example shows `urql` in use with React, as explained on the ["React/Preact" page of the "Basics"
4
19
documentation.](https://formidable.com/open-source/urql/docs/basics/react-preact/)
5
20
+16
examples/with-refresh-auth/README.md
+16
examples/with-refresh-auth/README.md
···
1
1
# With Refresh Authentication
2
2
3
+
<p>
4
+
<a href="https://stackblitz.com/github/urql-graphql/urql/tree/main/examples/with-refresh-auth">
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
11
+
href="https://codesandbox.io/p/sandbox/github/urql-graphql/urql/tree/main/examples/with-refresh-auth">
12
+
<img
13
+
alt="Open in CodeSandbox"
14
+
src="https://img.shields.io/badge/open_in_codesandbox-151515?logo=codesandbox&style=for-the-badge"
15
+
/>
16
+
</a>
17
+
</p>
18
+
3
19
This example shows `urql` in use with `@urql/exchange-auth`'s `authExchange`
4
20
to support authentication token and refresh token logic. This largely follows the ["Authentication" docs
5
21
page](https://formidable.com/open-source/urql/docs/advanced/authentication/)
+15
examples/with-retry/README.md
+15
examples/with-retry/README.md
···
1
1
# Integrating `@urql/exchange-retry`’s retryExchange
2
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
+
3
18
Integrating urql is as simple as:
4
19
5
20
1. Install packages
+17
examples/with-subscriptions-via-fetch/README.md
+17
examples/with-subscriptions-via-fetch/README.md
···
1
1
# With Subscriptions via Fetch
2
2
3
+
<p>
4
+
<a
5
+
href="https://stackblitz.com/github/urql-graphql/urql/tree/main/examples/with-subscriptions-via-fetch">
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-subscriptions-via-fetch">
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
+
3
20
This example shows `urql` in use with subscriptions running via a plain `fetch`
4
21
HTTP request to GraphQL Yoga. This uses the [GraphQL Server-Sent
5
22
Events](https://the-guild.dev/blog/graphql-over-sse) protocol, which means that
+15
examples/with-svelte/README.md
+15
examples/with-svelte/README.md
···
1
1
# With Svelte
2
2
3
+
<p>
4
+
<a href="https://stackblitz.com/github/urql-graphql/urql/tree/main/examples/with-svelte">
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-svelte">
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
+
3
18
This example shows `@urql/svelte` in use with Svelte, as explained on the ["Svelte" page of the "Basics"
4
19
documentation.](https://formidable.com/open-source/urql/docs/basics/svelte/)
5
20
+15
examples/with-vue3/README.md
+15
examples/with-vue3/README.md
···
1
1
# With Vue 3
2
2
3
+
<p>
4
+
<a href="https://stackblitz.com/github/urql-graphql/urql/tree/main/examples/with-vue3">
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-vue3">
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
+
3
18
This example shows `@urql/vue` in use with Vue 3, as explained on the ["Vue" page of the "Basics"
4
19
documentation.](https://formidable.com/open-source/urql/docs/basics/vue/)
5
20