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

GraphQL - Interactive Intro

By Jon Borgonia

Made with Slides.com

GraphQL - Interactive Intro

Intro to GraphQL and graphiql

  • 1,623

More from Jon Borgonia