commit dc5e9d77dca0a54e13e124b63920ad2c3f9eb0a8 · kitten.sh/urql

+22

examples/with-graphcache-pagination/README.md

···

       1
       1
       +
       # Integrating with React

     

       2
       2
       +
       

     

       3
       3
       +
       Integrating urql is as simple as:

     

       4
       4
       +
       

     

       5
       5
       +
       1. Install packages [getting started](https://formidable.com/open-source/urql/docs/basics/react-preact/)

     

       6
       6
       +
       

     

       7
       7
       +
       ```sh

     

       8
       8
       +
       yarn add urql graphql

     

       9
       9
       +
       # or

     

       10
       10
       +
       npm install --save urql graphql

     

       11
       11
       +
       ```

     

       12
       12
       +
       

     

       13
       13
       +
       2. Install [graphcache](https://formidable.com/open-source/urql/docs/graphcache/)

     

       14
       14
       +
       ```sh

     

       15
       15
       +
       yarn add @urql/exchange-graphcache

     

       16
       16
       +
       # or

     

       17
       17
       +
       npm install --save @urql/exchange-graphcache

     

       18
       18
       +
       ```

     

       19
       19
       +
       

     

       20
       20
       +
       3. Setting up the Client [here](src/App.js)

     

       21
       21
       +
       

     

       22
       22
       +
       4. Execute the Query [here](src/pages/PaginatedNpmSearch.js)

+39

examples/with-graphcache-pagination/package.json

···

       1
       1
       +
       {

     

       2
       2
       +
         "name": "react-urql-query",

     

       3
       3
       +
         "version": "1.0.0",

     

       4
       4
       +
         "private": true,

     

       5
       5
       +
         "dependencies": {

     

       6
       6
       +
           "@urql/exchange-graphcache": "^4.0.0",

     

       7
       7
       +
           "graphql": "^15.5.0",

     

       8
       8
       +
           "react": "^17.0.2",

     

       9
       9
       +
           "react-dom": "^17.0.2",

     

       10
       10
       +
           "urql": "^2.0.2"

     

       11
       11
       +
         },

     

       12
       12
       +
         "devDependencies": {

     

       13
       13
       +
           "react-scripts": "4.0.3"

     

       14
       14
       +
         },

     

       15
       15
       +
         "scripts": {

     

       16
       16
       +
           "start": "react-scripts start",

     

       17
       17
       +
           "build": "react-scripts build",

     

       18
       18
       +
           "test": "react-scripts test",

     

       19
       19
       +
           "eject": "react-scripts eject"

     

       20
       20
       +
         },

     

       21
       21
       +
         "eslintConfig": {

     

       22
       22
       +
           "extends": [

     

       23
       23
       +
             "react-app",

     

       24
       24
       +
             "react-app/jest"

     

       25
       25
       +
           ]

     

       26
       26
       +
         },

     

       27
       27
       +
         "browserslist": {

     

       28
       28
       +
           "production": [

     

       29
       29
       +
             ">0.2%",

     

       30
       30
       +
             "not dead",

     

       31
       31
       +
             "not op_mini all"

     

       32
       32
       +
           ],

     

       33
       33
       +
           "development": [

     

       34
       34
       +
             "last 1 chrome version",

     

       35
       35
       +
             "last 1 firefox version",

     

       36
       36
       +
             "last 1 safari version"

     

       37
       37
       +
           ]

     

       38
       38
       +
         }

     

       39
       39
       +
       }

+30

examples/with-graphcache-pagination/src/App.js

···

       1
       1
       +
       import { createClient, Provider, dedupExchange, fetchExchange } from "urql";

     

       2
       2
       +
       import { cacheExchange } from '@urql/exchange-graphcache';

     

       3
       3
       +
       import { relayPagination } from '@urql/exchange-graphcache/extras';

     

       4
       4
       +
       

     

       5
       5
       +
       import PaginatedNpmSearch from "./pages/PaginatedNpmSearch";

     

       6
       6
       +
       

     

       7
       7
       +
       const client = createClient({

     

       8
       8
       +
         url: "https://trygql.dev/graphql/relay-npm",

     

       9
       9
       +
         exchanges: [

     

       10
       10
       +
           dedupExchange,

     

       11
       11
       +
           cacheExchange({

     

       12
       12
       +
             resolvers: {

     

       13
       13
       +
               Query: {

     

       14
       14
       +
                 search: relayPagination(),

     

       15
       15
       +
               },

     

       16
       16
       +
             },

     

       17
       17
       +
           }),

     

       18
       18
       +
           fetchExchange

     

       19
       19
       +
         ]

     

       20
       20
       +
       });

     

       21
       21
       +
       

     

       22
       22
       +
       function App() {

     

       23
       23
       +
         return (

     

       24
       24
       +
           <Provider value={client}>

     

       25
       25
       +
             <PaginatedNpmSearch />

     

       26
       26
       +
           </Provider>

     

       27
       27
       +
         );

     

       28
       28
       +
       }

     

       29
       29
       +
       

     

       30
       30
       +
       export default App;

+13

examples/with-graphcache-pagination/src/index.css

···

       1
       1
       +
       body {

     

       2
       2
       +
         margin: 0;

     

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

     

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

     

       5
       5
       +
           sans-serif;

     

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

     

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

     

       8
       8
       +
       }

     

       9
       9
       +
       

     

       10
       10
       +
       code {

     

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

     

       12
       12
       +
           monospace;

     

       13
       13
       +
       }

+12

examples/with-graphcache-pagination/src/index.js

···

       1
       1
       +
       import React from 'react';

     

       2
       2
       +
       import ReactDOM from 'react-dom';

     

       3
       3
       +
       import './index.css';

     

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

     

       5
       5
       +
       

     

       6
       6
       +
       ReactDOM.render(

     

       7
       7
       +
         <React.StrictMode>

     

       8
       8
       +
           <App />

     

       9
       9
       +
         </React.StrictMode>,

     

       10
       10
       +
         document.getElementById('root')

     

       11
       11
       +
       );

     

       12
       12
       +

+60

examples/with-graphcache-pagination/src/pages/PaginatedNpmSearch.js

···

       1
       1
       +
       import React, { useState } from "react";

     

       2
       2
       +
       import { gql, useQuery } from "urql";

     

       3
       3
       +
       

     

       4
       4
       +
       const limit = 5;

     

       5
       5
       +
       const query = "graphql";

     

       6
       6
       +
       

     

       7
       7
       +
       const NPM_SEARCH = gql`

     

       8
       8
       +
         query Search($query: String!, $first: Int!, $after: String) {

     

       9
       9
       +
           search(query: $query, first: $first, after: $after) {

     

       10
       10
       +
             edges {

     

       11
       11
       +
               node {

     

       12
       12
       +
                 id

     

       13
       13
       +
                 name

     

       14
       14
       +
               }

     

       15
       15
       +
             }

     

       16
       16
       +
             pageInfo {

     

       17
       17
       +
               hasNextPage

     

       18
       18
       +
               endCursor

     

       19
       19
       +
             }

     

       20
       20
       +
           }

     

       21
       21
       +
         }

     

       22
       22
       +
       `;

     

       23
       23
       +
       

     

       24
       24
       +
       

     

       25
       25
       +
       const PaginatedNpmSearch = () => {

     

       26
       26
       +
         const [after, setAfter] = useState("");

     

       27
       27
       +
       

     

       28
       28
       +
         const [result] = useQuery({

     

       29
       29
       +
           query: NPM_SEARCH, 

     

       30
       30
       +
           variables: { query, first: limit, after } 

     

       31
       31
       +
         });

     

       32
       32
       +
       

     

       33
       33
       +
         const { data, fetching, error } = result;

     

       34
       34
       +
       

     

       35
       35
       +
         const searchResults = data?.search;

     

       36
       36
       +
       

     

       37
       37
       +
         return (

     

       38
       38
       +
           <div>

     

       39
       39
       +
             {error && <p>Oh no... {error.message}</p>}

     

       40
       40
       +
       

     

       41
       41
       +
             {fetching && <p>Loading...</p>}

     

       42
       42
       +
       

     

       43
       43
       +
             {searchResults && (

     

       44
       44
       +
               <>

     

       45
       45
       +
                 {searchResults.edges.map(({ node }) => (

     

       46
       46
       +
                   <div key={node.id}>{node.id}: {node.name}</div>

     

       47
       47
       +
                 ))}

     

       48
       48
       +
       

     

       49
       49
       +
                 {searchResults.pageInfo.hasNextPage && (

     

       50
       50
       +
                   <button onClick={() => setAfter(searchResults.pageInfo.endCursor)}>

     

       51
       51
       +
                     load more

     

       52
       52
       +
                   </button>

     

       53
       53
       +
                 )}

     

       54
       54
       +
               </>

     

       55
       55
       +
             )}

     

       56
       56
       +
           </div>

     

       57
       57
       +
         );

     

       58
       58
       +
       };

     

       59
       59
       +
       

     

       60
       60
       +
       export default PaginatedNpmSearch;

+1 -1

examples/with-pagination/README.md

···

       12
       12
        
       

     

       13
       13
        
       2. Setting up the Client [here](src/App.js)

     

       14
       14
        
       

     

       15
       15
       -
       3. Execute the Query [here](src/pages/PokemonList.js)

     

       15
       15
       +
       3. Execute the Query [here](src/pages/PaginatedNpmSearch.js)