kitten.sh
1# With Infinite Pagination (in React)
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
20This example shows how to implement **infinite scroll** pagination with `urql`
21in your React UI code.
22
23It's slightly different than the [`with-pagination`](../with-pagination) example
24and shows how to implement a full infinitely scrolling list with only your UI code,
25while fulfilling the following requirements:
26
27- Unlike with [`with-graphcache-pagination`](../with-graphcache-pagination),
28 the `urql` cache doesn't have to know about your infinite list, and this works
29 with any cache, even the document cache
30- Unlike with [`with-pagination`](../with-pagination), your list can use cursors,
31 and each page can update, while keeping the variables for the next page dynamic.
32- It uses no added state, no extra processing of lists, and you need no effects.
33
34In other words, unless you need a flat array of items
35(e.g. unless you’re using React Native’s `FlatList`), this is the simplest way
36to implement an infinitely scrolling, paginated list.
37
38This example is also reapplicable to other libraries, like Svelte or Vue.
39
40To run this example install dependencies and run the `start` script:
41
42```sh
43yarn install
44yarn run start
45# or
46npm install
47npm run start
48```
49
50This example contains:
51
52- The `urql` bindings and a React app with a client set up in [`src/App.js`](src/App.jsx)
53 - This also contains a search input which is used as input for the GraphQL queries
54- All pagination components are in [`src/SearchResults.jsx`](src/SearchResults.jsx)
55 - The `SearchRoot` component loads the first page of results and renders `SearchPage`
56 - The `SearchPage` displays cached results, and otherwise only starts a network request on
57 a button press
58 - The `Package` component is used for each result item