kitten.sh
1import { createClient } from '@urql/core';
2import { cacheExchange } from '@urql/exchange-graphcache';
3import { executeExchange } from '@urql/exchange-execute';
4import { buildSchema } from 'graphql';
5import { ALL_TODOS_QUERY } from './operations';
6
7export const cache = cacheExchange({
8 updates: {
9 Mutation: {
10 addTodo: (result, args, cache) => {
11 cache.updateQuery({ query: ALL_TODOS_QUERY }, data => {
12 data.todos.push(result.addTodo);
13 return data;
14 });
15 return result;
16 },
17 },
18 },
19});
20
21// local schema to be used with Execute Exchange
22const schema = buildSchema(`
23 type Todo {
24 id: ID!
25 text: String!
26 complete: Boolean!
27 }
28
29 type Writer {
30 id: ID!
31 name: String
32 amountOfBooks: Float!
33 recognized: Boolean!
34 number: Int!
35 interests: String!
36 }
37
38 type Book {
39 id: ID!
40 title: String!
41 published: Boolean!
42 genre: String!
43 rating: Float!
44 review: Review
45 }
46
47 type Store {
48 id: ID!
49 name: String!
50 country: String!
51 }
52
53 type Employee {
54 id: ID!
55 name: String!
56 origin: String!
57 }
58
59 type Author {
60 id: ID!
61 name: String!
62 recognized: Boolean!
63 book: Book!
64 }
65
66 type Review {
67 id: ID!
68 score: Int!
69 name: String!
70 reviewer: Person!
71 }
72
73 type Person {
74 id: ID!
75 name: String!
76 verfied: Boolean!
77 }
78
79 input NewTodo {
80 id: ID!
81 text: String!
82 complete: Boolean!
83 }
84
85 input NewTodosInput {
86 todos: [NewTodo]!
87 }
88
89 input NewWriter {
90 id: ID!
91 name: String
92 amountOfBooks: Float!
93 recognized: Boolean!
94 number: Int!
95 interests: String!
96 }
97
98 input NewWritersInput {
99 writers: [NewWriter]!
100 }
101
102 input NewBook {
103 id: ID!
104 title: String!
105 published: Boolean!
106 genre: String!
107 rating: Float!
108 review: NewReview
109 }
110
111 input NewBooksInput {
112 books: [NewBook]!
113 }
114
115 input NewStore {
116 id: ID!
117 name: String!
118 country: String!
119 }
120
121 input NewStoresInput {
122 stores: [NewStore]!
123 }
124
125 input NewEmployee {
126 id: ID!
127 name: String!
128 origin: String!
129 }
130
131 input NewEmployeesInput {
132 employees: [NewEmployee]!
133 }
134
135 input NewAuthor {
136 id: ID!
137 name: String!
138 recognized: Boolean!
139 book: NewBook!
140 }
141
142
143 input NewAuthorsInput {
144 authors: [NewAuthor]!
145 }
146
147 input NewReview {
148 id: ID!
149 score: Int!
150 name: String!
151 reviewer: NewPerson!
152 }
153
154 input NewPerson {
155 id: ID!
156 name: String!
157 verified: Boolean!
158 }
159
160 type Query {
161 todos: [Todo]!
162 writers: [Writer]!
163 books: [Book]!
164 stores: [Store]!
165 employees: [Employee]!
166 authors: [Author]!
167 }
168
169 type Mutation {
170 addTodo( text: String!, complete: Boolean! ): Todo!
171 updateTodo( id: ID!, complete: Boolean! ): Todo!
172 addTodos( newTodos: NewTodosInput! ): [Todo]!
173 addWriters( newWriters: NewWritersInput! ): [Writer]!
174 addBooks( newBooks: NewBooksInput! ): [Book]!
175 addStores( newStores: NewStoresInput! ): [Store]!
176 addEmployees( newEmployees: NewEmployeesInput! ): [Employee]!
177 addAuthors( newAuthors: NewAuthorsInput! ): [Author]!
178 }
179`);
180
181// local state to be used with Execute Exchange
182const todos = [];
183const writers = [];
184const books = [];
185const stores = [];
186const employees = [];
187const authors = [];
188
189// root value with resolvers to be used with Execute Exchange
190const rootValue = {
191 todos: () => {
192 return todos;
193 },
194 writers: () => {
195 return writers;
196 },
197 books: () => {
198 return books;
199 },
200 stores: () => {
201 return stores;
202 },
203 employees: () => {
204 return employees;
205 },
206 authors: () => {
207 return authors;
208 },
209 addTodo: args => {
210 const todo = { id: todos.length.toString(), ...args };
211 todos.push(todo);
212 return todo;
213 },
214 updateTodo: ({ id, complete }) => {
215 const [todoToBeUpdated] = todos.filter(todo => todo.id === id);
216 todoToBeUpdated.complete = complete;
217 return todoToBeUpdated;
218 },
219 addTodos: ({ newTodos }) => {
220 const todosToBeAdded = newTodos.todos;
221 todos.push(...todosToBeAdded);
222 return todos;
223 },
224 addWriters: ({ newWriters }) => {
225 const writersToBeAdded = newWriters.writers;
226 writers.push(...writersToBeAdded);
227 return writers;
228 },
229 addBooks: ({ newBooks }) => {
230 const booksToBeAdded = newBooks.books;
231 books.push(...booksToBeAdded);
232 return books;
233 },
234 addStores: ({ newStores }) => {
235 const storesToBeAdded = newStores.stores;
236 stores.push(...storesToBeAdded);
237 return stores;
238 },
239 addEmployees: ({ newEmployees }) => {
240 const employeesToBeAdded = newEmployees.employees;
241 employees.push(...employeesToBeAdded);
242 return employees;
243 },
244 addAuthors: ({ newAuthors }) => {
245 const authorsToBeAdded = newAuthors.authors;
246 authors.push(...authorsToBeAdded);
247 return authors;
248 },
249};
250
251const client = createClient({
252 url: 'http://localhost:3000/graphql',
253 exchanges: [
254 cache,
255 // cacheExchange({}),
256 executeExchange({ schema, rootValue }),
257 ],
258});
259
260export default client;