-
Notifications
You must be signed in to change notification settings - Fork 90
/
Posts.js
55 lines (49 loc) 路 1.16 KB
/
Posts.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
import { useQuery } from 'graphql-hooks'
import PropTypes from 'prop-types'
import React from 'react'
import CreatePost from './CreatePost'
export const allPostsQuery = `
query {
allPosts(orderBy: createdAt_DESC, first: 20) {
id
title
url
}
}
`
export default function Posts() {
const { loading, data, error, refetch } = useQuery(allPostsQuery)
return (
<>
<h3>Add post</h3>
<CreatePost onSuccess={refetch} />
<h3>Posts</h3>
<PostList loading={loading} error={error} data={data} />
</>
)
}
function PostList({ loading, error, data }) {
if (loading) return 'Loading...'
if (error) return 'There was an error loading the posts :('
if (!data || !data.allPosts || !data.allPosts.length) return 'No posts'
return (
<ul>
{data.allPosts.map(post => (
<li key={post.id}>
<a href={post.url}>{post.title}</a>
</li>
))}
</ul>
)
}
PostList.propTypes = {
loading: PropTypes.bool,
error: PropTypes.shape({
fetchError: PropTypes.any,
httpError: PropTypes.any,
graphQLErrors: PropTypes.array
}),
data: PropTypes.shape({
allPosts: PropTypes.array
})
}