-
-
Notifications
You must be signed in to change notification settings - Fork 443
/
Home.tsx
99 lines (87 loc) · 1.93 KB
/
Home.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
import React, { FC, useCallback, useMemo } from 'react';
import gql from 'graphql-tag';
import { useQuery, useMutation } from 'urql';
import { Error, Loading, Todo, NewTodo } from './components';
interface ITodo {
id: string;
text: string;
complete: boolean;
}
interface QueryResponse {
todos: ITodo[];
}
const ToggleTodo = `
mutation($id: ID!) {
toggleTodo(id: $id) {
id
complete
}
}
`;
const DeleteTodo = `
mutation($id: ID!) {
deleteTodo(id: $id) {
id
}
}
`;
const TodoQuery = gql`
query {
todos {
id
text
complete
}
}
`;
export const Home: FC = () => {
const [res, executeQuery] = useQuery<QueryResponse>({ query: TodoQuery });
const refetch = useCallback(
() => executeQuery({ requestPolicy: 'network-only' }),
[executeQuery]
);
const [toggleTodoMutation, executeToggleTodoMutation] = useMutation(
ToggleTodo
);
const [deleteTodoMutation, executeDeleteTodoMutation] = useMutation(
DeleteTodo
);
const todos = useMemo(() => {
if (res.fetching || res.data === undefined) {
return <Loading />;
}
if (res.error) {
return <Error>{res.error.message}</Error>;
}
return (
<ul>
{res.data.todos.map((todo: ITodo) => (
<Todo
deleteTodo={() => executeDeleteTodoMutation({ id: todo.id })}
toggleTodo={() => executeToggleTodoMutation({ id: todo.id })}
key={todo.id}
{...todo}
loading={toggleTodoMutation.fetching}
disabled={
toggleTodoMutation.fetching || deleteTodoMutation.fetching
}
/>
))}
</ul>
);
}, [
res,
toggleTodoMutation,
deleteTodoMutation,
executeToggleTodoMutation,
executeDeleteTodoMutation,
]);
return (
<>
<NewTodo />
{todos}
<button onClick={refetch}>Refetch</button>
</>
);
};
Home.displayName = 'Home';