kitten.sh
1import React, { useState } from 'react';
2import { gql, useQuery } from 'urql';
3
4const limit = 5;
5const query = 'graphql';
6
7const 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
22const 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}>
39 {packageInfo.id}: {packageInfo.name}
40 </div>
41 ))}
42
43 {isLastPage && searchResults.pageInfo.hasNextPage && (
44 <button
45 onClick={() => onLoadMore(searchResults.pageInfo.endCursor)}
46 >
47 load more
48 </button>
49 )}
50 </>
51 )}
52 </div>
53 );
54};
55
56const PaginatedNpmSearch = () => {
57 const [pageVariables, setPageVariables] = useState([
58 {
59 query,
60 first: limit,
61 after: '',
62 },
63 ]);
64
65 return (
66 <div>
67 {pageVariables.map((variables, i) => (
68 <SearchResultPage
69 key={'' + variables.after}
70 variables={variables}
71 isLastPage={i === pageVariables.length - 1}
72 onLoadMore={after =>
73 setPageVariables([...pageVariables, { after, first: limit, query }])
74 }
75 />
76 ))}
77 </div>
78 );
79};
80
81export default PaginatedNpmSearch;