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 edges {
11 node {
12 id
13 name
14 }
15 }
16 pageInfo {
17 hasNextPage
18 endCursor
19 }
20 }
21 }
22`;
23
24const PaginatedNpmSearch = () => {
25 const [after, setAfter] = useState('');
26
27 const [result] = useQuery({
28 query: NPM_SEARCH,
29 variables: { query, first: limit, after },
30 });
31
32 const { data, fetching, error } = result;
33
34 const searchResults = data?.search;
35
36 return (
37 <div>
38 {error && <p>Oh no... {error.message}</p>}
39
40 {fetching && <p>Loading...</p>}
41
42 {searchResults && (
43 <>
44 {searchResults.edges.map(({ node }) => (
45 <div key={node.id}>
46 {node.id}: {node.name}
47 </div>
48 ))}
49
50 {searchResults.pageInfo.hasNextPage && (
51 <button onClick={() => setAfter(searchResults.pageInfo.endCursor)}>
52 load more
53 </button>
54 )}
55 </>
56 )}
57 </div>
58 );
59};
60
61export default PaginatedNpmSearch;