GitHunt Example and Schema

In the documentation we’ll show examples of using Apollo in React via the GitHunt example application.

GitHunt is a Product Hunt-style application that shows a list of GitHub repositories, sorted by votes with attached comments. The API server code demonstrates combining two data sources–a third-party API and a local database–in a single GraphQL endpoint.

The React UI, which we’ll focus on in this guide, shows a lot of the techniques that you can use to build a great React UI for any GraphQL server. You can check out the full source code on GitHub or just read the snippets in the guide.

The GitHunt Schema

Most of the examples in this guide are written for the GitHunt schema. You can see the full schema written in the GraphQL Schema Language below:

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
# This uses the exact field names returned by the GitHub API for simplicity
type Repository {
name: String!
full_name: String!
description: String
html_url: String!
stargazers_count: Int!
open_issues_count: Int
# We should investigate how best to represent dates
created_at: String!
owner: User
}
# Uses exact field names from GitHub for simplicity
type User {
login: String!
avatar_url: String!
html_url: String!
}
type Comment {
postedBy: User!
createdAt: Float! # Actually a date
content: String!
repoName: String!
}
type Vote {
vote_value: Int!
}
type Entry {
repository: Repository!
postedBy: User!
createdAt: Float! # Actually a date
score: Int!
comments: [Comment]! # Should this be paginated?
commentCount: Int!
id: Int!
vote: Vote!
}
# To select the sort order of the feed
enum FeedType {
HOT
NEW
TOP
}
type Query {
# For the home page, the offset arg is optional to get a new page of the feed
feed(type: FeedType!, offset: Int, limit: Int): [Entry]
# For the entry page
entry(repoFullName: String!): Entry
# To display the current user on the submission page, and the navbar
currentUser: User
}
# Type of vote
enum VoteType {
UP
DOWN
CANCEL
}
type Mutation {
# Submit a new repository
submitRepository(repoFullName: String!): Entry
# Vote on a repository
vote(repoFullName: String!, type: VoteType!): Entry
# Comment on a repository
submitComment(repoFullName: String!, commentContent: String!): Comment
}
Edit on GitHub