GraphQL
An Interactive Intro
What is GraphQL?
It's a Query Language
And a Runtime
http://graphql.org
Graphiql
graphqlhub.com
- explore github using graphiql
- start with an empty query
-
like a repl
- use it to test your queries and schema before actually deploying it to an application
- there's also documentation (if you need it)
Open source project made by Facebook to explore graphql
GraphQL Language
- a graphql query is a request
- each query is an operation
- Create a new selection set
- Hint: ctrl+space
- Start exploring the Github API
- Write a query to get a Github user
- show the user's:
- id
- company
- avatar_url
- show the user's:
Is a standard language
Something is missing
{
github {
user {
id
company
avatar_url
}
}
}
SQL?
SELECT id, company, avatar_url
FROM users
WHERE username = "theRemix";
NoSQL?
db.users.find({ username : "theRemix" },
{ id : true,
company : true,
avatar_url : true
}
);
REST?
curl https://api.github.com/users/theRemix
Get user by username
{
github {
user (username: "theRemix") {
id
company
avatar_url
}
}
}
Introspective API
- ask the server about it's fields
__schema {
types {
name
}
}
__schema {
queryType {
fields {
name
description
}
}
}
- ask the server about it's types
GraphQL Language
- explore repo from github
- after user
-
get the facebook/graphql repo
- name
- commits
- messages
More queries!
all commit messages
repo (ownerUsername: "facebook", name: "graphql") {
name
commits {
message
}
}
GraphQL Language
-
get all of your repos
- show the name
- show all commit messages for each repo
More queries!
Get all your repos
showing all commit messages for each repo
user (username: "theRemix") {
id
company
avatar_url
repos {
name
commits {
message
}
}
}
REST API
- https://api.github.com/users/theRemix
- repos_url
- https://api.github.com/users/theRemix/repos
- go over each repo to ask for the commits
- commits_url
- https://api.github.com/repos/theRemix/aurelia-auth/commits
- how many rest hits is that?
do same thing to compare
118 repos!
Query Operation
- does not require query
- graphql is fine with one anonymous query
- you can be explicit
- you can (and should) also name your queries
- Multiple queries in a Document
The default operation
query GithubUserRepos {
github {
user(username: "theRemix") {
...
query GithubQueryRepo {
github {
repo(ownerUsername: "facebook", name: "graphql") {
...
Mutations
- For the other 3 CRUD operations
- Demonstration later
- Cannot do mutations on github api
GraphQL Top Level Operation
Subscription
- Open a socket on the query
- Push updates to me
- Not yet in standard
GraphQL Top Level Operation
Fragment
- Composition for GraphQL
- Re-usable partial queries
- Compose your whole data requirement using fragments
- React is composable through components
- Each component describes it's own data requirement through fragments
- Responsibility mapping is 1-to-1
GraphQL Top Level Operation
Fragment
- Create a fragment named RepoInfo
- Refactor for DRY-ness
Queries composed of fragments
fragment RepoInfo on GithubRepo {
name
commits {
message
}
}
...RepoInfo
Query Variables
- Create a query variables
- $username
- is type String
- is a required
- add query variables
- must be valid json
Re-usable Queries are more useful
Add Query Variables
query GithubUserRepos ($username:String!) {
github {
user(username: $username) {
...
Set Query Variables
{
"username": "sgnl"
}
Aliases
- Create an alias
- from company_name
- to company
Cause sometimes you need 'em
company_name: company
Directives
- @skip
- @include
- More coming soon maybe
- @defer, @stream, @live
- Add a conditional
- @include if $showAvatar
Alter GraphQL's execution behavior
avatar_url @include(if: $showAvatar)
Resources
- http://graphql.org/
- https://www.graphqlhub.com
- https://slides.com/theremix/graphql-server
- Schemas
- Mutations
- DB Storage
- data-loader
GraphQL - Interactive Intro
By Jon Borgonia
GraphQL - Interactive Intro
Intro to GraphQL and graphiql
- 1,633