GitHunt App and Schema

In the documentation we’ll show examples of using Apollo in Angular 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 demonstrates combining two data sources–a third-party API (the GitHub API), and a local database–in a single GraphQL endpoint.

The front-end, which we’ll focus on here, displays a lot of the techniques that you can use to build an great Angular UI for any GraphQL server. You can check out the full source code on GitHub, or just follow the snippets here.

The GitHunt Schema

You may be interested in the schema that GitHunt uses, and that the queries in this guide are written against. You can see the full schema written in the GraphQL Schema Language here:

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