kitten.sh
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>