Introduction to GraphQL

Install and Configure GraphiQL

Or alternatively, use the GitHub GraphQL Explorer

1. Install GraphiQL
2. Create a Personal Access Token: Give it access to repo, gist, notification and user (or less, if you want).
3. Set the endpoint to https://api.github.com/graphql, the method to POST and add the following header:

Authorization: bearer 56b0f1adcf8b4565b00e8c293a8431faafa0b5d32

Make your first query

Your login, how many followers you have and the login of the latest 3 followers

{
  viewer {
    login
    followers(last:3) {
      totalCount
      nodes {
        login
      }
    }
  }
}

The response will look something like

{
  "data": {
    "viewer": {
      "login": "pnavarrc",
      "followers": {
        "totalCount": 75,
        "nodes": [
          { "login": "rohinsha" },
          { "login": "pumee"    },
          { "login": "Elsa-W"   }
        ]
      }
    }
  }
}

Making Queries

Fields and Arguments

• Fields
• Arguments

{
  repository(owner:"facebook", name:"react") {
    issues(last: 25, states:[OPEN]) {
      totalCount
      edges {
        node {
          title
          number
          url
        }
      }
    }
  }
}

Aliases and Fragments

• Fragments
• Aliases

{
  react: repository(owner:"facebook", name:"react") {
    ...latestOpenIssues
  },
  native: repository(owner:"facebook", name:"react-native") {
    ...latestOpenIssues
  }
}

fragment latestOpenIssues on Repository {
  issues(last: 5, states:[OPEN]) {
    edges {
      node {
        title
        number
        url
      }
    }
  }
}

Variables

• Variables

query LatestOpenIssues($orgName:String!, $repoName:String!) {
  repository(owner:$orgName, name:$repoName) {
    ...latestOpenIssues
  }
}

// fragment latestOpenIssues ...

variables

{
  "orgName":  "facebook",
  "repoName": "react"
}

Mutations

• Mutations

Start this Gist!

mutation AddStartToGist($clientId:String!,$starrableId:ID!) {
  addStar(input: { clientMutationId:$clientId, starrableId:$starrableId }) {
  clientMutationId
    starrable {
      id
    }
  }
}

variables

{
  "clientId": "pablo",
  "starrableId": "MDQ6R2lzdDY1MGQ4OWViOGUwYTM0MGE5NzQwZDhkNmJkOGM1NmE3"
}

Learn More

• GraphQL.org
• GitHub GraphQL API
• GraphiQL