Using GitHub's
GraphQL API
(to manage open-source projects)
@bdougieYO
gucci.netlify.com
@bdougieYO
@bdougieYO
@bdougieYO
@bdougieYO
GitHub v4 API
@bdougieYOsandwich.netlify.com
@bdougieYO
LAUNCHING GITHUB'S PUBLIC
GRAPHQL API
@bdougieYOsandwich.netlify.com
@bdougieYO
@bdougieYOsandwich.netlify.com
@bdougieYO
GraphQL
a query language for APIs and a
runtime for fulfilling those queries
@bdougieYO
@bdougieYO
@bdougieYOsandwich.netlify.com
@bdougieYO
@bdougieYO
@bdougieYO
@bdougieYO
@bdougieYO
@bdougieYOsandwich.netlify.com
@bdougieYO
@bdougieYO
@bdougieYO
@bdougieYO
@bdougieYO
@bdougieYO
@bdougieYO
Monolithic
Architecture
@bdougieYO
@bdougieYO
@bdougieYO
@bdougieYO
@bdougieYO
ClientAPI
@bdougieYO
@bdougieYO
@bdougieYO
@bdougieYO
The JAM Architecture
/user
/repositories
/notifications
@bdougieYOsandwich.netlify.com
@bdougieYO
REST endpoints
@bdougieYO
@bdougieYO
@bdougieYO
@bdougieYO
GitHub
API
/user
@bdougieYO
My App
@bdougieYO
@bdougieYO
@bdougieYO
@bdougieYO
@bdougieYO
@bdougieYO
@bdougieYO
@bdougieYO
@bdougieYO
GitHub
API
My App
/repositories
@bdougieYO
@bdougieYO
@bdougieYO
@bdougieYO
@bdougieYO
GitHub
API
My App
@bdougieYO
@bdougieYO
@bdougieYO
@bdougieYO
@bdougieYO
GitHub
API
My App
/notifications
@bdougieYO
@bdougieYO
@bdougieYO
@bdougieYO
@bdougieYO
GitHub
API
My App
@bdougieYO
@bdougieYO
@bdougieYO
@bdougieYO
@bdougieYO
GitHub
API
My App
Go Fish?
@bdougieYO
@bdougieYO
@bdougieYO
@bdougieYO
@bdougieYO
/user
/repositories
/user/notifications
@bdougieYOsandwich.netlify.com
@bdougieYO
REST endpoints
@bdougieYO
@bdougieYO
@bdougieYO
@bdougieYO
lost in docs
@bdougieYOsandwich.netlify.com
@bdougieYO
@bdougieYO
@bdougieYO
@bdougieYO
@bdougieYO
How is GraphQL different
from the REST?
@bdougieYOsandwich.netlify.com
@bdougieYO
@bdougieYO
@bdougieYO
@bdougieYO
@bdougieYO
@bdougieYOsandwich.netlify.com
@bdougieYO
GraphQL
lets you replace multiple REST
requests with a single call to
fetch the data you specify
@bdougieYO
@bdougieYO
@bdougieYO
@bdougieYO
@bdougieYO
@bdougieYO
@bdougieYO
@bdougieYO
@bdougieYO
GitHub
API
My App
@bdougieYO
/graphql
@bdougieYO
@bdougieYO
@bdougieYO
@bdougieYO
GitHub
API
My App
@bdougieYOsandwich.netlify.com
@bdougieYO
GraphQL
not a replacement for REST,
but alternative for querying data
@bdougieYO
@bdougieYO
@bdougieYO
@bdougieYO
@bdougieYO
ClientAPI
@bdougieYO
@bdougieYO
@bdougieYO
@bdougieYO
GraphQL
Interactions
@bdougieYOsandwich.netlify.com
@bdougieYO
Query & Mutation
@bdougieYO
@bdougieYO
@bdougieYO
@bdougieYO
@bdougieYOsandwich.netlify.com
@bdougieYO
define the shape of the data
you want and you get it
@bdougieYO
@bdougieYO
@bdougieYO
@bdougieYO
GraphQL
Query
apple-bottom-jeans.netlify.com @bdougieYO
@bdougieYO
@bdougieYO
@bdougieYO
@bdougieYO
@bdougieYO
Mutation
apple-bottom-jeans.netlify.com @bdougieYO
@bdougieYO
@bdougieYO
@bdougieYO
@bdougieYO
@bdougieYO
@bdougieYOsandwich.netlify.com
@bdougieYO
How do I get started with
the GraphQL API?
@bdougieYO
@bdougieYO
@bdougieYO
@bdougieYO
@bdougieYOsandwich.netlify.com
@bdougieYO
api.github.com/graphql
@bdougieYO
@bdougieYO
@bdougieYO
@bdougieYO
@bdougieYOsandwich.netlify.com
@bdougieYO
GraphQL Explorer
@bdougieYO
@bdougieYO
@bdougieYO
@bdougieYO
@bdougieYO
@bdougieYO
@bdougieYO
@bdougieYO
@bdougieYO
developer.github.com/v4/explorer/
Query
@bdougieYO
@bdougieYO
@bdougieYO
@bdougieYO
@bdougieYO
developer.github.com/v4/explorer/
Data
@bdougieYO
@bdougieYO
@bdougieYO
@bdougieYO
@bdougieYO
GraphQL Explorer
@bdougieYO
@bdougieYO
@bdougieYO
@bdougieYO
I wanted to try this new
GraphQL API by building
a new project
@bdougieYOsandwich.netlify.com
@bdougieYO
@bdougieYO
@bdougieYO
@bdougieYO
@bdougieYO
GitHub is the place to
discover open source
@bdougieYOsandwich.netlify.com
@bdougieYO
@bdougieYO
@bdougieYO
@bdougieYO
@bdougieYO
I want to get involved in
Open Source
@bdougieYOsandwich.netlify.com
@bdougieYO
@bdougieYO
@bdougieYO
@bdougieYO
@bdougieYO
but every-time I find a project
I don't know where to start
@bdougieYOsandwich.netlify.com
@bdougieYO
@bdougieYO
@bdougieYO
@bdougieYO
@bdougieYO
Gucci Mane
If you don’t got sauce, then
you lost
@bdougieYOsandwich.netlify.com
@bdougieYO
@bdougieYO
@bdougieYO
@bdougieYO
@bdougieYO
an open source to manage
open source projects
@bdougieYOsandwich.netlify.com
@bdougieYO
@bdougieYO
@bdougieYO
@bdougieYO
@bdougieYO
@bdougieYO
Open Sauced
@bdougieYO
@bdougieYO
@bdougieYO
@bdougieYO
a way to save and take notes
on projects to rediscover later
@bdougieYOsandwich.netlify.com
@bdougieYO
@bdougieYO
@bdougieYO
@bdougieYO
@bdougieYO
@bdougieYO
GitHub
V4 API
Open
Sauced
Graph.cool
Fetching repo data
Fetching saved notes
Saving notes
@bdougieYO
@bdougieYO
@bdougieYO
@bdougieYO
use GitHub as a
platform
@bdougieYOsandwich.netlify.com
@bdougieYO
@bdougieYO
@bdougieYO
@bdougieYO
@bdougieYO
GitHub + GraphQL =
Open Sauced
@bdougieYOsandwich.netlify.com
@bdougieYO
@bdougieYO
@bdougieYO
@bdougieYO
@bdougieYO
Fetching Data
@bdougieYOsandwich.netlify.com
@bdougieYO
@bdougieYO
@bdougieYO
@bdougieYO
@bdougieYO
@bdougieYO
GitHub
V4 API
Open
Sauced
Graph.cool
Fetching repo data
Fetching saved notes
Saving notes on
@bdougieYO
@bdougieYO
@bdougieYO
@bdougieYO
@bdougieYO
Fetching Repo Data
@bdougieYO
@bdougieYO
@bdougieYO
@bdougieYO
GraphQL !== JavaScript
@bdougieYOsandwich.netlify.com
@bdougieYO
@bdougieYO
@bdougieYO
@bdougieYO
@bdougieYO
@bdougieYO
Fetching Repo Data
@bdougieYO
@bdougieYO
@bdougieYO
@bdougieYO
@bdougieYO
GitHub GraphQL Endpoint
@bdougieYO
@bdougieYO
@bdougieYO
@bdougieYO
@bdougieYO
GraphQL repoQuery
@bdougieYO
@bdougieYO
@bdougieYO
@bdougieYO
@bdougieYO
repoQuery
the exact shape
from the
GitHub explorer
@bdougieYO
@bdougieYO
@bdougieYO
@bdougieYO
repoQuery
the exact shape
from the
GitHub explorer
@bdougieYO
@bdougieYO
@bdougieYO
@bdougieYO
Documentation
@bdougieYOsandwich.netlify.com
@bdougieYO
@bdougieYO
@bdougieYO
@bdougieYO
@bdougieYO
@bdougieYO
Explorer is not just a playground
@bdougieYO
@bdougieYO
@bdougieYO
@bdougieYO
@bdougieYO
You can source documentation here too
Documentation
@bdougieYO
@bdougieYO
@bdougieYO
@bdougieYO
No more fishing through
GitHub’s API documentation
@bdougieYOsandwich.netlify.com
@bdougieYO
@bdougieYO
@bdougieYO
@bdougieYO
@bdougieYO
Pagination on
Edges
@bdougieYOsandwich.netlify.com
@bdougieYO
@bdougieYO
@bdougieYO
@bdougieYO
@bdougieYO
[Issue]
@bdougieYO
@bdougieYO
@bdougieYO
@bdougieYO
@bdougieYO
@bdougieYOsandwich.netlify.com
@bdougieYO
Documentation
@bdougieYO
@bdougieYO
@bdougieYO
@bdougieYO
@bdougieYOsandwich.netlify.com
@bdougieYO
Documentation
@bdougieYO
@bdougieYO
@bdougieYO
@bdougieYO
@bdougieYO
Node Limit
@bdougieYO
@bdougieYO
@bdougieYO
@bdougieYO
@bdougieYO
Fetching Issues
@bdougieYO
@bdougieYO
@bdougieYO
@bdougieYO
@bdougieYO
Limit is 100 records
@bdougieYO
@bdougieYO
@bdougieYO
@bdougieYO
Issues
apple-bottom-jeans.netlify.com @bdougieYO
@bdougieYO
@bdougieYO
@bdougieYO
@bdougieYO
@bdougieYO
@bdougieYO
Ordering and Filter
happens in the Query
@bdougieYO
@bdougieYO
@bdougieYO
@bdougieYO
@bdougieYO
Filter by only open issues
@bdougieYO
@bdougieYO
@bdougieYO
@bdougieYO
@bdougieYO
Order by latest issue
@bdougieYO
@bdougieYO
@bdougieYO
@bdougieYO
Paginated Issues
apple-bottom-jeans.netlify.com @bdougieYO
@bdougieYO
@bdougieYO
@bdougieYO
@bdougieYO
@bdougieYO
@bdougieYO
Paginating Issue Data
@bdougieYO
@bdougieYO
@bdougieYO
@bdougieYO
@bdougieYO
Alias edges to data
@bdougieYO
@bdougieYO
@bdougieYO
@bdougieYO
@bdougieYO
All edge content has a cursor
@bdougieYO
@bdougieYO
@bdougieYO
@bdougieYO
@bdougieYO
Offsetting edge content with cursor
@bdougieYO
@bdougieYO
@bdougieYO
@bdougieYO
Mutations
@bdougieYOsandwich.netlify.com
@bdougieYO
@bdougieYO
@bdougieYO
@bdougieYO
@bdougieYO
@bdougieYOsandwich.netlify.com
@bdougieYO
Mutate GitHub API
@bdougieYO
@bdougieYO
@bdougieYO
@bdougieYO
@bdougieYOsandwich.netlify.com
@bdougieYO
@bdougieYO
@bdougieYO
@bdougieYO
@bdougieYO
@bdougieYOsandwich.netlify.com
@bdougieYO
Documentation
@bdougieYO
@bdougieYO
@bdougieYO
@bdougieYO
@bdougieYOsandwich.netlify.com
@bdougieYO
Documentation
@bdougieYO
@bdougieYO
@bdougieYO
@bdougieYO
Saving Data
@bdougieYOsandwich.netlify.com
@bdougieYO
@bdougieYO
@bdougieYO
@bdougieYO
@bdougieYO
@bdougieYO
GitHub
V4 API
Open
Sauced
Graph.cool
Fetching repo data
Fetching saved notes
Saving notes on
@bdougieYO
@bdougieYO
@bdougieYO
@bdougieYO
@bdougieYOsandwich.netlify.com
@bdougieYO
@bdougieYO
@bdougieYO
@bdougieYO
@bdougieYO
Apollo
apple-bottom-jeans.netlify.com @bdougieYO
@bdougieYO
@bdougieYO
@bdougieYO
@bdougieYO
@bdougieYO
networkInterface
apple-bottom-jeans.netlify.com @bdougieYO
@bdougieYO
@bdougieYO
@bdougieYO
@bdougieYO
@bdougieYO
ApolloProvider
apple-bottom-jeans.netlify.com @bdougieYO
@bdougieYO
@bdougieYO
@bdougieYO
@bdougieYO
@bdougieYO
@bdougieYOsandwich.netlify.com
@bdougieYO
www.apollodata.com/
@bdougieYO
@bdougieYO
@bdougieYO
@bdougieYO
updateRepository
apple-bottom-jeans.netlify.com @bdougieYO
@bdougieYO
@bdougieYO
@bdougieYO
@bdougieYO
@bdougieYO
Saving Notes
apple-bottom-jeans.netlify.com
@bdougieYO
@bdougieYO
@bdougieYO
@bdougieYO
@bdougieYO
Saving Note Mutation
apple-bottom-jeans.netlify.com @bdougieYO
@bdougieYO
@bdougieYO
@bdougieYO
@bdougieYO
@bdougieYO
Saving Note Creation
apple-bottom-jeans.netlify.com @bdougieYO
@bdougieYO
@bdougieYO
@bdougieYO
@bdougieYO
@bdougieYO
What is missing in the
GraphQL API
@bdougieYO
There are things missing
from the GitHub V4 API
@bdougieYO
@bdougieYO
@bdougieYO
@bdougieYO
What is missing in the
GraphQL API
@bdougieYO
@bdougieYO
@bdougieYO
@bdougieYO
@bdougieYO
What is missing in the
GraphQL API
@bdougieYO
@bdougieYO
@bdougieYO
@bdougieYO
@bdougieYO
@bdougieYOsandwich.netlify.com
@bdougieYO
Graph.cool
Schema
+

Resolver
Functions
@bdougieYO
@bdougieYO
@bdougieYO
@bdougieYO
GitHub
API
Open Sauced
@bdougieYO
bdougie/open-sauced
@bdougieYO
@bdougieYO
@bdougieYO
@bdougieYO
@bdougieYO
opensauced.pizza
@bdougieYO
@bdougieYO
@bdougieYO
@bdougieYO
@bdougieYO
gucci.netlify.com
@bdougieYO
@bdougieYO
@bdougieYO
@bdougieYO
@bdougieYOsandwich.netlify.com
@bdougieYO
Podcast where I first talked about GraphQL
@bdougieYO
@bdougieYO
@bdougieYO
@bdougieYO
What is missing in the
GraphQL API
@bdougieYO
don’t get lost.
stay saucy
@bdougieYO
@bdougieYO
@bdougieYO
@bdougieYO
@bdougieYO

Using GitHub's GraphQL API to manage open source projects