6 |
7 | The application structure is setup like a typical Rails app using controllers, views and routes with one key difference, no models. This app doesn't connect directly to any database. All the data is being fetched remotely from the GitHub GraphQL API. Instead of declaring resource models, data queries are declared right along side their usage in controllers and views. This allows an efficient single request to be constructed rather than making numerous REST requests to render a single view.
8 |
9 | ## Table of Contents
10 |
11 | Jump right into the code and read the inline documentation. The following is a suggested reading order:
12 |
13 | 1. [app/controller/repositories_controller.rb](https://github.com/github/github-graphql-rails-example/blob/master/app/controllers/repositories_controller.rb) defines the top level GraphQL queries to fetch repository list and show pages.
14 | 2. [app/views/repositories/index.html.erb](https://github.com/github/github-graphql-rails-example/blob/master/app/views/repositories/index.html.erb) shows the root template's listing query and composition over subviews.
15 | 3. [app/views/repositories/_repositories.html.erb]( https://github.com/github/github-graphql-rails-example/blob/master/app/views/repositories/_repositories.html.erb) makes use of GraphQL connections to show the first couple items and a "load more" button.
16 | 4. [app/views/repositories/show.html.erb](https://github.com/github/github-graphql-rails-example/blob/master/app/views/repositories/show.html.erb) shows the root template for the repository show page.
17 | 5. [app/controller/application_controller.rb](https://github.com/github/github-graphql-rails-example/blob/master/app/controllers/application_controller.rb) defines controller helpers for executing GraphQL query requests.
18 | 6. [config/application.rb](https://github.com/github/github-graphql-rails-example/blob/master/config/application.rb) configures `GraphQL::Client` to point to the GitHub GraphQL endpoint.
19 |
20 | ## Running locally
21 |
22 | First, you'll need a [GitHub API access token](https://help.github.com/articles/creating-an-access-token-for-command-line-use) to make GraphQL API requests. This should be set as a `GITHUB_ACCESS_TOKEN` environment variable as configured in [config/secrets.yml](https://github.com/github/github-graphql-rails-example/blob/master/config/secrets.yml).
23 |
24 | ``` sh
25 | $ git clone https://github.com/github/github-graphql-rails-example
26 | $ cd github-graphql-rails-example/
27 | $ bundle install
28 | $ GITHUB_ACCESS_TOKEN=abc123 bin/rails server
29 | ```
30 |
31 | And visit [http://localhost:3000/](http://localhost:3000/).
32 |
33 | ## See Also
34 |
35 | * [Facebook's GraphQL homepage](http://graphql.org/)
36 | * [GitHub's GraphQL API Early Access program](https://developer.github.com/early-access/graphql)
37 | * [Ruby GraphQL Client library](https://github.com/github/graphql-client)
38 | * [Relay Modern example](https://github.com/github/github-graphql-relay-example)
39 |
--------------------------------------------------------------------------------
/Rakefile:
--------------------------------------------------------------------------------
1 | require_relative 'config/application'
2 | Rails.application.load_tasks
3 |
--------------------------------------------------------------------------------
/app/controllers/application_controller.rb:
--------------------------------------------------------------------------------
1 | class ApplicationController < ActionController::Base
2 | class QueryError < StandardError; end
3 |
4 | private
5 | # Public: Define request scoped helper method for making GraphQL queries.
6 | #
7 | # Examples
8 | #
9 | # data = query(ViewerQuery)
10 | # data.viewer.login #=> "josh"
11 | #
12 | # definition - A query or mutation operation GraphQL::Client::Definition.
13 | # Client.parse("query { version }") returns a definition.
14 | # variables - Optional set of variables to use during the operation.
15 | # (default: {})
16 | #
17 | # Returns a structured query result or raises if the request failed.
18 | def query(definition, variables = {})
19 | response = GitHub::Client.query(definition, variables: variables, context: client_context)
20 |
21 | if response.errors.any?
22 | raise QueryError.new(response.errors[:data].join(", "))
23 | else
24 | response.data
25 | end
26 | end
27 |
28 | # Public: Useful helper method for tracking GraphQL context data to pass
29 | # along to the network adapter.
30 | def client_context
31 | # Use static access token from environment. However, here we have access
32 | # to the current request so we could configure the token to be retrieved
33 | # from a session cookie.
34 | { access_token: GitHub::Application.secrets.github_access_token }
35 | end
36 | end
37 |
--------------------------------------------------------------------------------
/app/controllers/repositories_controller.rb:
--------------------------------------------------------------------------------
1 | class RepositoriesController < ApplicationController
2 | # Define query for repository listing.
3 | #
4 | # All queries MUST be assigned to constants and therefore be statically
5 | # defined. Queries MUST NOT be generated at request time.
6 | IndexQuery = GitHub::Client.parse <<-'GRAPHQL'
7 | # All read requests are defined in a "query" operation
8 | query {
9 | # viewer is the currently authenticated User
10 | viewer {
11 | # "...FooConstant" is the fragment spread syntax to include the index
12 | # view's fragment.
13 | #
14 | # "Views::Repositories::Index::Viewer" means the fragment is defined
15 | # in app/views/repositories/index.html.erb and named Viewer.
16 | ...Views::Repositories::Index::Viewer
17 | }
18 | }
19 | GRAPHQL
20 |
21 | # GET /repositories
22 | def index
23 | # Use query helper defined in ApplicationController to execute the query.
24 | # `query` returns a GraphQL::Client::QueryResult instance with accessors
25 | # that map to the query structure.
26 | data = query IndexQuery
27 |
28 | # Render the app/views/repositories/index.html.erb template with our
29 | # current User.
30 | #
31 | # Using explicit render calls with locals is preferred to implicit render
32 | # with instance variables.
33 | render "repositories/index", locals: {
34 | viewer: data.viewer
35 | }
36 | end
37 |
38 |
39 | # Define query for "Show more repositories..." AJAX action.
40 | MoreQuery = GitHub::Client.parse <<-'GRAPHQL'
41 | # This query uses variables to accept an "after" param to load the next
42 | # 10 repositories.
43 | query($after: String!) {
44 | viewer {
45 | repositories(first: 10, after: $after) {
46 | # Instead of refetching all of the index page's data, we only need
47 | # the data for the repositories container partial.
48 | ...Views::Repositories::Repositories::RepositoryConnection
49 | }
50 | }
51 | }
52 | GRAPHQL
53 |
54 | # GET /repositories/more?after=CURSOR
55 | def more
56 | # Execute the MoreQuery passing along data from params to the query.
57 | data = query MoreQuery, after: params[:after]
58 |
59 | # Using an explicit render again, just render the repositories list partial
60 | # and return it to the client.
61 | render partial: "repositories/repositories", locals: {
62 | repositories: data.viewer.repositories
63 | }
64 | end
65 |
66 |
67 | # Define query for repository show page.
68 | ShowQuery = GitHub::Client.parse <<-'GRAPHQL'
69 | # Query is parameterized by a $id variable.
70 | query($id: ID!) {
71 | # Use global id Node lookup
72 | node(id: $id) {
73 | # Include fragment for app/views/repositories/show.html.erb
74 | ...Views::Repositories::Show::Repository
75 | }
76 | }
77 | GRAPHQL
78 |
79 | # GET /repositories/ID
80 | def show
81 | # Though we've only defined part of the ShowQuery in the controller, when
82 | # query(ShowQuery) is executed, we're sending along the query as well as
83 | # all of its fragment dependencies to the API server.
84 | #
85 | # Here's the raw query that's actually being sent.
86 | #
87 | # query RepositoriesController__ShowQuery($id: ID!) {
88 | # node(id: $id) {
89 | # ...Views__Repositories__Show__Repository
90 | # }
91 | # }
92 | #
93 | # fragment Views__Repositories__Show__Repository on Repository {
94 | # id
95 | # owner {
96 | # login
97 | # }
98 | # name
99 | # description
100 | # homepageUrl
101 | # ...Views__Repositories__Navigation__Repository
102 | # }
103 | #
104 | # fragment Views__Repositories__Navigation__Repository on Repository {
105 | # hasIssuesEnabled
106 | # }
107 | data = query ShowQuery, id: params[:id]
108 |
109 | if repository = data.node
110 | render "repositories/show", locals: {
111 | repository: repository
112 | }
113 | else
114 | # If node can't be found, 404. This may happen if the repository doesn't
115 | # exist, we don't have permission or we used a global ID that was the
116 | # wrong type.
117 | head :not_found
118 | end
119 | end
120 |
121 | StarMutation = GitHub::Client.parse <<-'GRAPHQL'
122 | mutation($id: ID!) {
123 | star(input: { starrableId: $id }) {
124 | starrable {
125 | ...Views::Repositories::Star::Repository
126 | }
127 | }
128 | }
129 | GRAPHQL
130 |
131 | def star
132 | data = query StarMutation, id: params[:id]
133 |
134 | if repository = data.star
135 | respond_to do |format|
136 | format.js {
137 | render partial: "repositories/star", locals: { repository: data.star.starrable }
138 | }
139 |
140 | format.html {
141 | redirect_to "/repositories"
142 | }
143 | end
144 | else
145 | head :not_found
146 | end
147 | end
148 |
149 | UnstarMutation = GitHub::Client.parse <<-'GRAPHQL'
150 | mutation($id: ID!) {
151 | unstar(input: { starrableId: $id }) {
152 | starrable {
153 | ...Views::Repositories::Star::Repository
154 | }
155 | }
156 | }
157 | GRAPHQL
158 |
159 | def unstar
160 | data = query UnstarMutation, id: params[:id]
161 |
162 | if repository = data.unstar
163 | respond_to do |format|
164 | format.js {
165 | render partial: "repositories/star", locals: { repository: data.unstar.starrable }
166 | }
167 |
168 | format.html {
169 | redirect_to "/repositories"
170 | }
171 | end
172 | else
173 | head :not_found
174 | end
175 | end
176 | end
177 |
--------------------------------------------------------------------------------
/app/views/layouts/application.html.erb:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | <%= repository.description %>
78 | <% end %> 79 | 80 |81 | <%# NOTE: homepage_url is snake case here %> 82 | <% if repository.homepage_url.present? %> 83 | Homepage 84 | <% end %> 85 | 86 | View on GitHub 87 |
88 |