GraphQl with Apollo Server and usage of Query, Aliases,Arguments, Fragments (Part 2)

Hello and welcome back to another article of the GraphQl series, if you are new to this article I recommend you to visit Part 1 of this article series by clicking here.

In the previous article, we learned about what graphql is, why it is used and what problem it solved which was in the case of REST, further we have also set up our graphql server using Apollo Server.

Now, in this article, we will dive deeper into the functionality of graphql and how to perform advanced Query operations in GraphQL.

Query :

As the name suggests, it's just a query for the specific fields of value that you want on objects. Let's start by looking at a very simple query and the result we get when we run it:

In GraphQl, we represent a query by the keyword "query" at first followed by the name of that particular query e.g. "hero" and the set of fields you want to get as data, for e.g. in the above case look at the query structure and the response structure we get when we queried "hero" both are exactly same we get what we want and that is the most important aspect using GraphQl over REST.

Queries are mostly used for getting the data, just like the GET in REST API, while for updating and manipulating the data in graphql we have another keyword called "Mutation" which we will see later. Now let us head to our server playground which we have created in Part 1.

In the above image of our Apollo server sandbox, you can see that we have a query "getAllPost" and mention the field "description and look at the response structure we get from the server, which is exactly the same as the query.

Arguments :

GraphQl also allows us to pass the argument to our query and we pass different arguments based on our requirements, whenever we pass the arguments to our queries we also have to resolve it in the "resolvers", that we have passed in while creating the Apollo server.

Suppose we want to get the posts of a single user, this can be done by just passing userID as an argument and creating the query for it e.g. userPost(id: ID!) Now we have to resolve it in resolvers as shown below.

//resolvers.js
 const resolvers={
Query:{
userPost:async(parent,args,context,info)=>{
      try {
          //extract id from args
            const {id} = args
          //your logic for getting single post
          //return postModel.findOne({userID:id})
         }
      catch{
            //default error logic
          } 
      }
    }
}

while resolving the particular query which has an argument passed, graphql basically accepts four parameters to resolve the query.

1. parent: The previous object, which is for a field on the root Query type is often not used.

2. args: args represents the argument which you specifically passed to a query.

3. context: A value which is provided to every resolver and holds important contextual information like the currently logged-in user, or access to a database.

4. info: A value which holds field-specific information relevant to the current query as well as the schema details.

From the above-mentioned code snippets, we can clearly see that we can extract the variable passed inside arguments by a simple destructuring method, Let us how a query works when an argument is passed.

from above sandbox, represents how to pass an argument inside a query and extract the relevant data that we want by mentioning required fields.

Aliases :

Aliases are nothing much, they are just the way to give our response the name which you want to give, for example in the above query we see that when we query "userPost" we get the response with an array of same name as "userPost"

Now we can change this name to our appropriate name, which we want as shown below in an image.

In the sandbox, the query structure remains the same but here we now just have added the "singleUserPost" at the beginning of our query "userPost" and we can see that the array name we get as a response also got changed to "singleUserPost" and this is what we called Aliases in GraphQl.

Fragments :

Let's say we had a relatively complicated page in our app, which lets us look at two heroes side by side, along with their friends. You can imagine that such a query could quickly get complicated because we would need to repeat the fields at least once - one for each side of the comparison.

That's why GraphQL includes reusable units called fragments. Fragments let you construct sets of fields and then include them in queries where you need to.

The above image shows fragments example as two separate queries that can be compared on a single go.

Conclusion:

Therefore, we once again concluded from this article that there are multiple ways we can curate our query in graphQl and how we modify our query in graphQL such that we can get only the specific fields and data that are relevant to us, which were not case of REST because of over-fetching and under-fetching,

furthermore, we learned about the different aspects of using Aliases, arguments and fragments efficiently in GraphQL.

In the Next Article, we will explore more about how to perform the create, update and delete functionality using another keyword called "Mutation" and how to write resolvers for it Efficiently. So, sit tight because there is much more to explore in the series.

graphql.org