kitten.sh
1# With Pagination (in React)
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
19This example shows how to implement pagination with `urql` in your React UI code.
20
21It renders several pages as fragments with one component managing the variables
22for the page queries. This example is also reapplicable to other libraries,
23like Svelte or Vue.
24
25To run this example install dependencies and run the `start` script:
26
27```sh
28yarn install
29yarn run start
30# or
31npm install
32npm run start
33```
34
35This example contains:
36
37- The `urql` bindings and a React app with a client set up in [`src/App.js`](src/App.jsx)
38- A managing component called `PaginatedNpmSearch` set up to render all pages in [`src/PaginatedNpmSearch.jss`](src/PaginatedNpmSearch.jsx)
39- A page component called `SearchResultPage` running page queries in [`src/PaginatedNpmSearch.jsx`](src/PaginatedNpmSearch.jsx)