kitten.sh
1import React, { useState } from 'react';
2import { Client, Provider, cacheExchange, fetchExchange } from 'urql';
3
4import SearchRoot from './SearchResults';
5
6const client = new Client({
7 // The GraphQL API we use here uses the NPM registry
8 // We'll use it to display search results for packages
9 url: 'https://trygql.formidable.dev/graphql/relay-npm',
10 exchanges: [cacheExchange, fetchExchange],
11});
12
13// We will be able to enter a search term, and this term
14// will render search results
15function PaginatedNpmSearch() {
16 const [search, setSearch] = useState('urql');
17
18 const setSearchValue = event => {
19 event.preventDefault();
20 setSearch(event.currentTarget.value);
21 };
22
23 return (
24 <>
25 <header>
26 <h4>Type to search for npm packages</h4>
27 {/* Try changing the search input, then changing it back... */}
28 {/* If you do this, all cached pages will display immediately! */}
29 <input
30 type="search"
31 value={search}
32 onChange={setSearchValue}
33 placeholder="npm package name"
34 />
35 </header>
36 <main>
37 {/* The <SearchRoot> component contains all querying logic */}
38 <SearchRoot searchTerm={search} />
39 </main>
40 </>
41 );
42}
43
44function App() {
45 return (
46 <Provider value={client}>
47 <PaginatedNpmSearch />
48 </Provider>
49 );
50}
51
52export default App;