Mirror: The highly customizable and versatile GraphQL client with which you add on features like normalized caching as you grow.
(examples) Add with-pagination (#1586)
* (examples) Add with-pagination
authored by
Yanko Valera
and committed by
GitHub
79217374
f130ef7a
+185
-4
+15
examples/with-pagination/README.md
+15
examples/with-pagination/README.md
···
1
+
# Integrating with React
2
+
3
+
Integrating urql is as simple as:
4
+
5
+
1. Install packages [getting started](https://formidable.com/open-source/urql/docs/basics/react-preact/)
6
+
7
+
```sh
8
+
yarn add urql graphql
9
+
# or
10
+
npm install --save urql graphql
11
+
```
12
+
13
+
2. Setting up the Client [here](src/App.js)
14
+
15
+
3. Execute the Query [here](src/pages/PokemonList.js)
+38
examples/with-pagination/package.json
+38
examples/with-pagination/package.json
···
1
+
{
2
+
"name": "react-urql-query",
3
+
"version": "1.0.0",
4
+
"private": true,
5
+
"dependencies": {
6
+
"graphql": "^15.5.0",
7
+
"react": "^17.0.2",
8
+
"react-dom": "^17.0.2",
9
+
"urql": "^2.0.2"
10
+
},
11
+
"devDependencies": {
12
+
"react-scripts": "4.0.3"
13
+
},
14
+
"scripts": {
15
+
"start": "react-scripts start",
16
+
"build": "react-scripts build",
17
+
"test": "react-scripts test",
18
+
"eject": "react-scripts eject"
19
+
},
20
+
"eslintConfig": {
21
+
"extends": [
22
+
"react-app",
23
+
"react-app/jest"
24
+
]
25
+
},
26
+
"browserslist": {
27
+
"production": [
28
+
">0.2%",
29
+
"not dead",
30
+
"not op_mini all"
31
+
],
32
+
"development": [
33
+
"last 1 chrome version",
34
+
"last 1 firefox version",
35
+
"last 1 safari version"
36
+
]
37
+
}
38
+
}
+17
examples/with-pagination/src/App.js
+17
examples/with-pagination/src/App.js
···
1
+
import { createClient, Provider } from "urql";
2
+
3
+
import PaginatedNpmSearch from "./pages/PaginatedNpmSearch";
4
+
5
+
const client = createClient({
6
+
url: "https://trygql.dev/graphql/relay-npm",
7
+
});
8
+
9
+
function App() {
10
+
return (
11
+
<Provider value={client}>
12
+
<PaginatedNpmSearch />
13
+
</Provider>
14
+
);
15
+
}
16
+
17
+
export default App;
+13
examples/with-pagination/src/index.css
+13
examples/with-pagination/src/index.css
···
1
+
body {
2
+
margin: 0;
3
+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
4
+
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
5
+
sans-serif;
6
+
-webkit-font-smoothing: antialiased;
7
+
-moz-osx-font-smoothing: grayscale;
8
+
}
9
+
10
+
code {
11
+
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
12
+
monospace;
13
+
}
+12
examples/with-pagination/src/index.js
+12
examples/with-pagination/src/index.js
+78
examples/with-pagination/src/pages/PaginatedNpmSearch.js
+78
examples/with-pagination/src/pages/PaginatedNpmSearch.js
···
1
+
import React, { useState } from "react";
2
+
import { gql, useQuery } from "urql";
3
+
4
+
const limit = 5;
5
+
const query = "graphql";
6
+
7
+
const NPM_SEARCH = gql`
8
+
query Search($query: String!, $first: Int!, $after: String) {
9
+
search(query: $query, first: $first, after: $after) {
10
+
nodes {
11
+
id
12
+
name
13
+
}
14
+
pageInfo {
15
+
hasNextPage
16
+
endCursor
17
+
}
18
+
}
19
+
}
20
+
`;
21
+
22
+
const SearchResultPage = ({ variables, onLoadMore, isLastPage }) => {
23
+
const [result] = useQuery({ query: NPM_SEARCH, variables });
24
+
25
+
const { data, fetching, error } = result;
26
+
27
+
const searchResults = data?.search;
28
+
29
+
return (
30
+
<div>
31
+
{error && <p>Oh no... {error.message}</p>}
32
+
33
+
{fetching && <p>Loading...</p>}
34
+
35
+
{searchResults && (
36
+
<>
37
+
{searchResults.nodes.map((packageInfo) => (
38
+
<div key={packageInfo.id}>{packageInfo.id}: {packageInfo.name}</div>
39
+
))}
40
+
41
+
{isLastPage && searchResults.pageInfo.hasNextPage && (
42
+
<button onClick={() => onLoadMore(searchResults.pageInfo.endCursor)}>
43
+
load more
44
+
</button>
45
+
)}
46
+
</>
47
+
)}
48
+
</div>
49
+
);
50
+
};
51
+
52
+
const PaginatedNpmSearch = () => {
53
+
const [pageVariables, setPageVariables] = useState([
54
+
{
55
+
query,
56
+
first: limit,
57
+
after: ""
58
+
},
59
+
]);
60
+
61
+
return (
62
+
<div>
63
+
{pageVariables.map((variables, i) => (
64
+
<SearchResultPage
65
+
key={"" + variables.after}
66
+
variables={variables}
67
+
isLastPage={i === pageVariables.length - 1}
68
+
onLoadMore={(after) =>
69
+
setPageVariables([...pageVariables, { after, first: limit, query }])
70
+
}
71
+
/>
72
+
)
73
+
)}
74
+
</div>
75
+
);
76
+
};
77
+
78
+
export default PaginatedNpmSearch;
+12
-4
examples/with-retry/README.md
+12
-4
examples/with-retry/README.md
···
5
5
1. Install packages
6
6
7
7
```sh
8
-
yarn add urql @urql/exchange-retry graphql
8
+
yarn add urql graphql
9
9
# or
10
-
npm install --save urql @urql/exchange-retry graphql
10
+
npm install --save urql graphql
11
11
```
12
12
13
-
2. Setting up the Client and adding the `retryExchange` [here](src/App.js)
13
+
2. Add [retry exchange](https://formidable.com/open-source/urql/docs/advanced/retry-operations/)
14
14
15
-
3. Execute the Query [here](src/pages/PokemonList.js)
15
+
```sh
16
+
yarn add @urql/exchange-retry
17
+
# or
18
+
npm install --save @urql/exchange-retry
19
+
```
20
+
21
+
3. Setting up the Client and adding the `retryExchange` [here](src/App.js)
22
+
23
+
4. Execute the Query [here](src/pages/Color.js)