kitten.sh
1import React from 'react';
2import { Client, Provider, fetchExchange } from 'urql';
3
4import { cacheExchange } from '@urql/exchange-graphcache';
5
6import Songs from './Songs';
7
8const cache = cacheExchange({
9 keys: {
10 Alphabet: data => data.char,
11 },
12 updates: {
13 Subscription: {
14 alphabet(parent, _args, cache) {
15 const list = cache.resolve('Query', 'list') || [];
16 list.push(parent.alphabet);
17 cache.link('Query', 'list', list);
18 },
19 },
20 },
21});
22
23const client = new Client({
24 url: 'http://localhost:3004/graphql',
25 fetchSubscriptions: true,
26 exchanges: [cache, fetchExchange],
27});
28
29function App() {
30 return (
31 <Provider value={client}>
32 <Songs />
33 </Provider>
34 );
35}
36
37export default App;