Exploring GraphQL

Before we get going with GraphQL, let's talk about what it is, and how you can use it with Github.

GraphQL

• Query Language
• Get what you need
• From Facebook
• Open Source

GraphQL is an open source Query Language for managing data on a server.

What makes it unique is that it lets you retrieve everyting you need in a single call. You get a lot of information quicker than with traditional REST APIs and in less requests to the server.

Like React, GraphQL was created by facebook and has been running their mobile apps since 2012, which in web years, it's real long time. Just imagine how efficient and fast it has to be to run all the data from Facebook.

It's been an open source project that runs under it's own foundation since 2018. It's also used by Github and many other companies, so it's battle tested.

GitHub GraphQL

• Account Info
• GraphQL Explorer

Github's version allow you to look up the information about your account and repositories and is a good place to get some practical experience with GraphQL.

If you want to play around with your data, you can use the

This lets you use your real, live production data from Github as if you were in an app that's already authenticated. The Explorer also has a lot of built in documentation.

On the left hand side, there's a spot to type in your query (1), you should see a basic query that will get your login.

query { 
  viewer { 
    login
  }
}

GraphQL Explorer

If you hit the play button(2), you can see the results on the right hand side (3). The results are in JSON (JavaScript Object Notation) format, which is easily consumed by JavaScript.

You'll notice that the GraphQL request Syntax is something close to JSON or JavaScript Object Notation.

What your receive back is JSON (JavaScript Object Notation), which is easy to digest into JavaScript.

When you make a request on the right hand side, you'll see a documentation button on the right hand side which will open a new tab

This section will change depending on your query and it allows you to search through the GraphQL docs.

There's also three tabs named prettify which will clean up the indending of your code, history, which goes through all the queries you've made and Explorer, which lets you navigate through the documentation via an index.

There's a section at the bottom that lets you try out different variables to use with your data as well.

Before we get going, make sure you log into your account and take a peek at the graphQL explorer. It's a lot of fun.