-
Notifications
You must be signed in to change notification settings - Fork 90
/
HomePage.js
89 lines (79 loc) 路 1.91 KB
/
HomePage.js
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
import React, { Fragment } from 'react'
import { useQuery, useManualQuery, useMutation } from 'graphql-hooks'
// components
import HelloComponent from '../components/Hello'
const HOMEPAGE_QUERY = `
query HomepageQuery {
users {
name
}
}
`
const GET_FIRST_USER_QUERY = `
query FirstUser {
firstUser {
name
}
}
`
const CREATE_USER_MUTATION = `
mutation CreateUser($name: String!) {
createUser(name: $name) {
name
}
}
`
function HomePage() {
const [name, setName] = React.useState('')
const { loading, data, error, refetch: refetchUsers } = useQuery(
HOMEPAGE_QUERY
)
const [createUser] = useMutation(CREATE_USER_MUTATION)
const [getFirstUser, { data: firstUserData }] = useManualQuery(
GET_FIRST_USER_QUERY,
{
fetchOptionsOverrides: {
method: 'GET'
}
}
)
async function createNewUser() {
await createUser({ variables: { name } })
setName('')
refetchUsers()
}
return (
<div>
Home page
{loading && <div>...loading</div>}
{error && <div>error occured</div>}
{!loading && !error && data.users && (
<Fragment>
List of users:
{data.users.length === 0 && <span> No users found</span>}
{!!data.users.length && (
<ul>
{data.users.map((user, i) => (
<li key={i}>{user.name}</li>
))}
</ul>
)}
<HelloComponent user={data.users[0]} />
</Fragment>
)}
<div>
<input
type="text"
value={name}
onChange={e => setName(e.target.value)}
/>
<button onClick={createNewUser}>Create User</button>
</div>
<button onClick={getFirstUser}>
Manually trigger Query via GET method
</button>
<div>First User: {firstUserData && firstUserData.firstUser.name}</div>
</div>
)
}
export default HomePage