Queries in Graphql

Introduction

Hey readers, in our last blog we got a little introduction to graphQL like what it is and what it does. But we did not go into details of querying the data. So, in this blog, we will dig deeper into some of its concepts like how we query data in it. If in case you have not seen my last post introduction to graphQL, you can visit here.

Let’s get started

Queries in GraphQL

Querying is simply a concept of retrieving data from an object. For example, if I write something like

{
   students{
	name
   }
}

This will return something like:

{
  "data": {
    "students": {
      "name": "tom"
    }
  }
}

You will get the same fields that you expected. In this case, the query just returned the name of the student as a string type. But what if that field is an object. Then in that case we just need to mention that field as a subfield of it. For example:

{
   students{
	name
	subject{
		name
        }
   }
}

Now the result of the query will be like this:

{
  "data": {
    "students": {
      "name": "tom",
      "subject": [
        {
          "name": "English"
        },
        {
          "name": "Maths"
        }
      ]
    }
  }
}

Here we can see it returned an array of objects. So that is the simplicity of GraphQL. The query will look the same for a single item or if there are multiple items.

The above example is a kind of example where it will fetch the data of all students. But what if we want data for a particular student. In that case, we can pass arguments in our query so that we get the selected data only. Here is an example where we want to query the data of a student with roll no 10.

{
    students(rollNo: 10) {
      name
    }
}

So the result for this query will be something like this:

{
    "data": {
      "students": {
        "name": "Jim Hopper"
      }
    }
}

Operation Name

All the queries that we have written till now do not have the operation type or name. But this is not a good practice. We must mention the type of operation and the name of that operation. We have only 3 types of operation available query, mutation, and subscription. Defining the operation type and a proper operation name will also help you in debugging your code if in case anything goes wrong.

So, here is an example of how we mention the operation type and name.

 query StudentsName {
    student {
      name
    }
  }

So here the operation type is a query and the operation name is StudentsName

Now the result will be similar:

{
    "data": {
      "student": {
        "name": "John"
      }
    }
  }

Variables in GraphQL

Till now, we have seen how we can pass arguments inside a query to get specific data. But that data was static. And mostly in the applications the data is dynamic so we need to create a variable for it that can receive those dynamic values.

So, how do we do it?

We replace the static value with $variableName and declare it as one of the variables accepted by the query.

Here is an example:

 query Student($rollNo: RollNo) {
    student(rollNo: $rollNo) {
      name
    }
  }

And then we can simply pass it as

{
  "rollNo": "10"
}

Here you can also define a default variable. Then in that case you can call the query without the variable as well because in that case default value will be used for the query.

query Student($rollNo: RollNo = 5) {
    student(rollNo: $rollNo) {
      name
    }
  }

Here 5 is the default variable value. So if you call this query without passing any variable then 5 will be taken as the value otherwise the value which is passed.

Conclusion

GraphQL gives the client the power to ask for what exactly is needed and nothing else. The graphQL results are always predictable. So any application using GraphQL is able to control the data but not the server. In this blog, we learned how we can query data from a graphQL server and some good practices while querying like mentioning the operation name. We also learned how we define variables in the query. But this is not all. There are still many more things that we will see in future posts.
You can also go through the official documentation of GraphQL to check the other topics here.

Finally, for more such updates, please follow our LinkedIn page- FrontEnd Studio.