GraphQL Queries - Variables

GraphQL Queries - Variables

Real world application requires queries to be dynamic and respond to user input, so we have variables in GraphQL to pass dynamic value and get the response from the server.

Before we jump into the variable definition and use cases, we will get familiar with Operation

If you are just starting your GraphQL journey, read GraphQL Queries - Getting Started before coming to this post

Operation

GraphQL allows the user to use shorthand syntax with defining name of the query but the preferred way to define a query name with the query keyword

query TodoListResult {
    todos {
        name
        completed
        created_at
    }
}

We have defined Operation name for the above query called TodoListResult. These names will come in handy when you are debugging your application or logging the data.

Operation Type

There are three operation types in GraphQL

• query - Fetch the data from the database
• mutation - Create/ Modify data in the database
• subscription - Realtime update on changes in data

These operation types form the first part of the operation declaration followed by the name of the operation

{operationType} {operationName} {

}

Variables

Variable help in adding dynamic value to the GraphQL Queries. Queries can be reused based on the argument and variables passed. So lets look at an example of using variable inside an operation.

query TodoListResult($count: Int) {
    todos(limit: $count) {
        name
        created_at
    }
}

Variables are defined with operation name and their type and then you can use the variable in the operation using the same syntax $count

In this example, we are trying to limit the number of todos returned from the query based on the variable passed into the query. So you can imagine reusing the same query in multiple pages based on your requirement.

When you are calling this query you need to pass the variable.

{
    "count": 5
}

Practical Exercise

Lets look at some practical exercise to get your hands dirty with these GraphQL Variables.

1. Creating a query to return the todos from start_date to end_date
2. Creating a query to return either completed todos or not completed todos

If you are unsure where to start follow this tutorial to get started with GraphQL server is a short time using Hasura

Build Sports API with GraphQL - Hasura - Part 1

Join our community

Stay tuned by subscribing to our mailing list and joining our Discord community

Discord