Use GraphQL for the First Time

Using GraphQL Explorer

In this section, we are going to introduce you to a tool that enables you to experiment with GraphQL quickly and easily.

Running Your First GraphQL Query

1. Navigate to the GraphQL explorer.

2. Once the page has loaded, click the “Sign in with GitHub” button. If you don’t have a GitHub account, here are some instructions for getting an account setup.

   On your first log in, The GraphQL interface displays a sample query in the left pane that should look like this:

   # Type queries into this side of the screen, and you will
   # see intelligent typeaheads aware of the current GraphQL type schema,
   # live syntax, and validation errors highlighted within the text.
   
   # We'll get you started with a simple query showing your username!
   query {
     viewer {
       login
     }
   }
   

3. Click the “Execute Query” button (it looks like a Play button) to run the query that is in the left pane and display the results in the right pane.

   Clicking “Execute Query” should present something that looks like this:

   {
     "data": {
       "viewer": {
         "login": "githubteacher"
       }
     }
   }
   

   The response from a query in GraphQL will be JSON, just like the query itself, and is returned in the exact same format as the request.

4. Make changes to the sample query.

   In this case, we only asked GraphQL to tell us our login name, but what if we wanted to know more?

   Just below login, add a new line with the text avatarUrl. Now your query should look like this:

    {
      viewer {
        login
        avatarUrl
      }
    }
   

To learn more about the information you can request and what is being returned, check out “Tell me why” below .