commit 00c840fff87b3fb505b85e3842013062aad563a3 · kitten.sh/urql

+4 -2

docs/basics/ui-patterns.md

···

       87
       87
        
       

     

       88
       88
        
       Here we keep an array of all `variables` we've encountered and use them to render their

     

       89
       89
        
       respective `result` page. This only rerenders the additional page rather than having a long

     

       90
       90
       -
       list that constantly changes. [You can find a full code example of this pattern in our example folder on the topic of Graphcache pagination.](https://github.com/urql-graphql/urql/tree/main/examples/with-graphcache-pagination)

     

       90
       90
       +
       list that constantly changes. [You can find a full code example of this pattern in our example folder on the topic of pagination.](https://github.com/urql-graphql/urql/tree/main/examples/with-pagination)

     

       91
       91
        
       

     

       92
       92
       -
       We also do not need to use our normalized cache to achieve this. As long as we're able to split individual lists up into chunks across components, we can also solve this problem entirely in UI code. [Read our example code on how to achieve this.](https://github.com/urql-graphql/urql/tree/main/examples/with-pagination)

     

       92
       92
       +
       This code doesn't take changing variables into account, which will affect the cursors. For an

     

       93
       93
       +
       example that takes full infinite scrolling into account, [you can find a full code example of an

     

       94
       94
       +
       extended pattern in our example folder on the topic of infinite pagination.](https://github.com/urql-graphql/urql/tree/main/examples/with-infinite--pagination)

     

       93
       95
        
       

     

       94
       96
        
       ## Prefetching data

     

       95
       97

docs/graphcache/local-resolvers.md

···

       452
       452
        
       with separate components per page in environments like React Native, where a `FlatList` would

     

       453
       453
        
       require a flat, infinite list of items.

     

       454
       454
        
       

     

       455
       455
       +
       > **Note:** If you don't need a flat array of results, you can also achieve infinite pagination

     

       456
       456
       +
       > with only UI code. [You can find a code example of UI infinite pagination in our example folder.](https://github.com/urql-graphql/urql/tree/main/examples/with-pagination)

     

       457
       457
       +
       

     

       458
       458
       +
       [You can find a code example of infinite pagination with Graphcahce in our example folder.](https://github.com/urql-graphql/urql/tree/main/examples/with-graphcache-pagination).

     

       459
       459
       +
       Please keep in mind that this patterns has some limitations when you're handling cache updates.

     

       460
       460
       +
       Deleting old pages from the cache selectively may be difficult, so the UI pattern in the above

     

       461
       461
       +
       note is preferred.

     

       462
       462
       +
       

     

       455
       463
        
       ### Simple Pagination

     

       456
       464
        
       

     

       457
       465
        
       Given we have a schema that uses some form of `offset` and `limit` based pagination, we can use the

+3 -1

examples/README.md

···

       5
       5
        
       | [`with-svelte`](./with-svelte)                                   | Shows a basic query in `@urql/svelte` with Svelte.                                                           |

     

       6
       6
        
       | [`with-vue3`](./with-vue3)                                       | Shows a basic query in `@urql/vue` with Vue 3.                                                               |

     

       7
       7
        
       | [`with-next`](./with-next)                                       | Shows some examples with `next-urql` in Next.js with the default, `getStaticProps` and `getServerSideProps`. |

     

       8
       8
       -
       | [`with-pagination`](./with-pagination)                           | Shows how to generically set up infinite pagination with `urql` in UI code.                                  |

     

       8
       8
       +
       | [`with-pagination`](./with-pagination)                           | Shows how to generically set up pagination with `urql` in UI code.                                           |

     

       9
       9
       +
       | [`with-infinite-pagination`](./with-infinite-pagination)         | Shows how to generically set up infinite scrolling pagination with `urql` in UI code.                        |

     

       9
       10
        
       | [`with-apq`](./with-apq)                                         | Shows Automatic Persisted Queries with `@urql/exchange-persisted-fetch`.                                     |

     

       10
       11
        
       | [`with-graphcache-updates`](./with-graphcache-updates)           | Shows manual cache updates with `@urql/exchange-graphcache`.                                                 |

     

       11
       12
        
       | [`with-graphcache-pagination`](./with-graphcache-pagination)     | Shows the automatic infinite pagination helpers from `@urql/exchange-graphcache`.                            |

     
···

       13
       14
        
       | [`with-refresh-auth`](./with-refresh-auth)                       | Shows an example of authentication with refresh tokens using `@urql/exchange-auth`.                          |

     

       14
       15
        
       | [`with-retry`](./with-retry)                                     | Shows how to set up `@urql/exchange-retry` for retrying failed operations.                                   |

     

       15
       16
        
       | [`with-defer-stream-directives`](./with-defer-stream-directives) | Demonstrates `urql` and `@urql/exchange-graphcache` with built-in support for `@defer` and `@stream`.        |

     

       17
       17
       +
       | [`with-subscriptions-via-fetch`](./with-subscriptions-via-fetch) | Demonstrates `urql` executing subscriptions with a GraphQL Yoga API via the `fetchExchange`.                 |

+27

examples/with-infinite-pagination/index.html

···

       1
       1
       +
       <!DOCTYPE html>

     

       2
       2
       +
       <html lang="en">

     

       3
       3
       +
       <head>

     

       4
       4
       +
         <meta charset="UTF-8">

     

       5
       5
       +
         <meta name="viewport" content="width=device-width, initial-scale=1.0">

     

       6
       6
       +
         <title>with-pagination</title>

     

       7
       7
       +
         <style>

     

       8
       8
       +
           body {

     

       9
       9
       +
             margin: 0;

     

       10
       10
       +
             font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',

     

       11
       11
       +
               'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',

     

       12
       12
       +
               sans-serif;

     

       13
       13
       +
             -webkit-font-smoothing: antialiased;

     

       14
       14
       +
             -moz-osx-font-smoothing: grayscale;

     

       15
       15
       +
           }

     

       16
       16
       +
       

     

       17
       17
       +
           code {

     

       18
       18
       +
             font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',

     

       19
       19
       +
               monospace;

     

       20
       20
       +
           }

     

       21
       21
       +
         </style>

     

       22
       22
       +
       </head>

     

       23
       23
       +
       <body>

     

       24
       24
       +
         <div id="root"></div>

     

       25
       25
       +
         <script type="module" src="/src/index.jsx"></script>

     

       26
       26
       +
       </body>

     

       27
       27
       +
       </html>

+19

examples/with-infinite-pagination/package.json

···

       1
       1
       +
       {

     

       2
       2
       +
         "name": "with-pagination",

     

       3
       3
       +
         "version": "0.0.0",

     

       4
       4
       +
         "private": true,

     

       5
       5
       +
         "scripts": {

     

       6
       6
       +
           "start": "vite"

     

       7
       7
       +
         },

     

       8
       8
       +
         "dependencies": {

     

       9
       9
       +
           "@urql/core": "^4.0.10",

     

       10
       10
       +
           "graphql": "^16.6.0",

     

       11
       11
       +
           "react": "^18.2.0",

     

       12
       12
       +
           "react-dom": "^18.2.0",

     

       13
       13
       +
           "urql": "^4.0.3"

     

       14
       14
       +
         },

     

       15
       15
       +
         "devDependencies": {

     

       16
       16
       +
           "@vitejs/plugin-react": "^3.1.0",

     

       17
       17
       +
           "vite": "^4.2.0"

     

       18
       18
       +
         }

     

       19
       19
       +
       }

examples/with-infinite-pagination/src/index.jsx

···

       1
       1
       +
       import React from 'react';

     

       2
       2
       +
       import { createRoot } from 'react-dom/client';

     

       3
       3
       +
       

     

       4
       4
       +
       import App from './App';

     

       5
       5
       +
       

     

       6
       6
       +
       createRoot(document.getElementById('root')).render(<App />);

examples/with-infinite-pagination/vite.config.js

···

       1
       1
       +
       import { defineConfig } from 'vite';

     

       2
       2
       +
       import react from '@vitejs/plugin-react';

     

       3
       3
       +
       

     

       4
       4
       +
       // https://vitejs.dev/config/

     

       5
       5
       +
       export default defineConfig({

     

       6
       6
       +
         plugins: [react()],

     

       7
       7
       +
       });

+5 -3

examples/with-pagination/README.md

···

       1
       1
        
       # With Pagination (in React)

     

       2
       2
        
       

     

       3
       3
       -
       This example shows how to implement infinite pagination with `urql` in your React UI code. It

     

       4
       4
       -
       renders several pages as fragments with one component managing the variables for the page queries.

     

       5
       5
       -
       This example is also reapplicable to other libraries, like Svelte or Vue.

     

       3
       3
       +
       This example shows how to implement pagination with `urql` in your React UI code.

     

       4
       4
       +
       

     

       5
       5
       +
       It renders several pages as fragments with one component managing the variables

     

       6
       6
       +
       for the page queries. This example is also reapplicable to other libraries,

     

       7
       7
       +
       like Svelte or Vue.

     

       6
       8
        
       

     

       7
       9
        
       To run this example install dependencies and run the `start` script:

     

       8
       10