GraphQL

Learn GraphQL Query Alias, Fragments, Variables & Directives with Examples

January 31, 2018

author:

Learn GraphQL Query Alias, Fragments, Variables & Directives with Examples

GraphQL has three basic components: Query, Mutations and Subscriptions. We can build APIs in GraphQL with the help of these basic components. But since the central idea of GraphQL is client driven APIs, a client has an enormous responsibility to use API optimally and reduce the execution time.

And for that, it is important to know such resources or concepts that can reduce an overall headache for both client and server. In this post, we will discuss some of the golden concepts of GraphQL that can boost client queries.

# GraphQL Query Example:

Let us start with simple queries:

{
  Posts{
    id
    title
    content
  }
}
#named query:
query allPostsQuery{  
 Posts{
    id
    title
    content
  }
}

Both the queries return same data response. The second one though is more readable and is particularly useful for debugging or logging complex queries.

# GraphQL Aliases:

In some random usecase if a client wants to fetch two items (posts here), the immediate thought would be to do something like:

query twoPost{
  Post(id:1){
    title
  }
  Post(id:4){
    title
  } 
}

Well, this is the response you would get:
GraphQL Alias Error

GraphQL Alias Example:

For such implications, we can use field aliases. It can be implemented as below:

query getTwoItems {
  one: Post (id: 1){   
     title
     content
  }
  two: Post (id: 4){
    title
    content
  }
}

Result:
GraphQL Alias

# GraphQL Fragments for Nested Query:

The above example of aliases works perfectly for limited records. We had only two of them in the alias. But what if we have hundreds of them? Repeating all the fields would get cumbersome then.

In such situations, fragments can be helpful. They promote DRY (Don’t Repeat Yourself).

GraphQL Fragments in Schema with Example:

Here’s how we can refactor the alias:

query fragment {
  one: Post (id: 1){
    ...postFragment
  }
  two: Post (id: 2){
    ...postFragment
  }
}

fragment postFragment on Post {
  title
  content
}

Here we are declaring a fragment for Post type and calling it postFragment.

GraphQL Fragment Example

# GraphQL Query Variables

Most of the APIs work with dynamic data. Variables can be used for that. A variable can be defined with $ like any JavaScript variable.

GraphQL Variable Example:

query variables($id: ID!){
  Post(id:$id){
    id
    title
    content
  } 
}

Here $id is the variable name and ID is the variable type. Also ! In $ID! Depicts a required argument. We can specify query variable $id as:

{
  "id": 1
}
GraphQL Variables Example

# GraphQL Directives

Directives in GraphQL are used for data filtering. GraphQL has two built-in directives: @skip and @include. Both of them are quite self-explanatory.

@skip Directive:

@skip omits the particular field or data from the returned payload data by the server.

GraphQL Skip Directive Example:

Here’s how we can use @skip in GraphQL Query:

query directiveSkip($id: Boolean!){
  Posts{
    id @skip(if:$id)
    title
    content
  } 
}

We can run this query by providing a true value for $id in query variables:

{
  "id": true
}
GraphQL Skip Directive Example

@include Directive:

@include, on the other hand, is opposite of @skip. It includes a dataset or field to the client only if the query variable is set to true.

GraphQL Include Directive Example:

query directiveInclude($id: Boolean!){
  Posts{
    id @include(if:$id)
    title
    content
  } 
}
{
  "id": true
}
GraphQL Include Directive Example

Conclusion:

We had a look at some awesome query features in GraphQL. If used efficiently, these can prove to be very powerful components of API in any application. Got questions to ask? Let’s discuss in the comment section below..

Leave a comment

Your email address will not be published. Required fields are marked *