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

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