A Beginner’s Dive into GraphQL — Part 3 — GraphQL Variables

GraphQL Variables

So far, in A Beginner’s Dive into GraphQL — Part 1 and Part 2, we have covered a lot of what is GraphQL? What is GraphQL Query? What is GraphQL Schema? and many more questions.

Today we will dive deeper to know what is GraphQL Variables? why is it useful? and how to use it?

GraphQL Variables

GraphQL works on one principle. Requesting data in multiple formats from the same server in one single endpoint. When it comes to REST API, we will have different REST API endpoints to get different information. In GraphQL, it’s just one. Variables are the very powerful tool of GraphQL to request different information from the server.

Generally in most applications, the arguments to fields will be dynamic: For example, there might be a drop-down that lets you select which book you would like to read or a search category related to your favorite book. GraphQL has a first-class way to factor dynamic values out of the query, and pass them as a separate dictionary. These values are called variables.

A GraphQL query can be parameterized with variables, maximizing query reuse, and avoiding costly string building in clients at runtime. It simply means that you can reuse query with the help of GraphQL variables. When we start working with variables, we need to do three things:

• Replace the static value in the query with $variableName
• Declare $variableName as one of the variables accepted by the query
• Pass variableName: value in the separate, transport-specific (usually JSON) variables dictionary

Here is an example of a simple GraphQL Query with Variables:

query AuthorAgeAndBooks($author: Author) {
  author(name: $author) {
    age
    books {
      title
    }
  }
}

Now, to use the variables in GraphiQL, we just need to click on the Query Variables panel at the bottom of the screen and pass the following code:

{
  "author": "Krish Williams"
}

Another important thing to remember is Variables should be written using the JSON format. Therefore if you add for example a comma at the end of the last attribute, the GraphQL invalidates the object with the variables.

Response you may receive from the GraphQL server will look something like this:

{
 “data”: {
  “author”: {
   “age”: 35,
   “books”: [
        {
         “title”: “GraphQL - No REST Architect”
        },
        {
        “title”: “JavaScript - Inside Out”
        }
     ]
   }
 }
}

This is the best example of flexibility GraphQL offers to the web developers. You can simply pass a different variable rather than need to construct an entirely new query. This is also, in general, a good practice for denoting which arguments in our query are expected to be dynamic — we should never be doing string interpolation to construct queries from user-supplied values.

Default variables

GraphQL also supports default variable like many other programming languages out there. Default values can also be assigned to the variables in the query by adding the default value after the type declaration. When default values are provided for all variables, the user can call the query without passing any variables. If any variables are passed as part of the variables dictionary, they will override the defaults.

query AuthorAgeAndBooks($author: Author= "Krish Williams") {
  author(name: $author) {
    age
    books {
      title
    }
  }
}

Here, if the user doesn’t pass any variables, they will receive information about author “Krish Williams”.

That’s it for the GraphQL Variables. Any suggestion or question on this article, please feel free to write me at hima.chhag@gmail.com or in the comment section below.

Happy Coding!

• A Beginner’s Dive into GraphQL — Part 1
• A Beginner’s Dive into GraphQL — Part 2