Fragments Reusable Query Components

They are the reusable components of a query, which can be reused at multiple places. They need to defined once in the file. This helps us in cases where we have a complex query, and we want to declare it only once, so we can reuse it at multiple places in the code.

Example

In the below query, we have

  • basicInfoOfPokemon – It represents a fragment that is defined on the Pokemon type. It determines which fields to include from the Pokemon type.
  • id, and name – they represent the fields that are present in the fragment that is defined on the Pokemon type.
  • retrievePokemon – root field of the query that represents the data that the client wants to retrieve from the API.
  • pikachu – argument for the query passed that represents the specific criteria that the user wants the information about
  • firstPokemon – they represent the aliases that are assigned to the pokemon field of the query, It implies that the data returned by the respective queries will be renamed as firstPokemon, and secondPokemon, respectively.
fragment basicInfoOfPokemon on Pokemon {
name
id
}

query retrievePokemon{
firstPokemon: pokemon(name:"pikachu") {
...basicInfoOfPokemon
}
}

Output:

The output of the above query call will look like below

Querying Data with GraphQL

GraphQL is an open-source technology that allows us to query only the data that we require, unlike the traditional REST architecture which returns us the entire resources and data with specific endpoints configured for the same. Using GraphQL, we specify using the query the data that we want, and it returns the specified data in the specified format. It helps reduce the amount of data transfer over the network and saves network bandwidth. In this article, we will learn how to Query data using GraphQL.

Similar Reads

Anatomy of a GraphQL Query

A GraphQL Query consists of fields that define how the response would look like. The Query is sent to the GraphQL server which returns the response in the required format....

Nested Queries Retrieving Related Data

With the help of nested queries, we can pull all the related data from a single query, instead of doing multiple queries....

Aliases Renaming Fields in Responses

With the help of aliases, we can rename the fields on the client side to something other than that which is actually present in the Schema type. This gives us more flexibility to change the response data without changing the schema itself....

Fragments Reusable Query Components

They are the reusable components of a query, which can be reused at multiple places. They need to defined once in the file. This helps us in cases where we have a complex query, and we want to declare it only once, so we can reuse it at multiple places in the code....

Query Variables Parameterizing Queries

With the help of variables, we can parameterize our queries and declare or initialize them in our queries to be later used as a placeholder for dynamic values inside the query body....

Conclusion

In this article, we learned how to query or fetch data using GraphQL endpoints, and learned about the basic concepts of GraphQL queries, including fields that define what data we want to receive from the server, arguments for retrieving the data having a specific id, aliases to rename the response data for simplicity and to avoid naming conflicts, fragments to define the reusable pieces of code in the query, and directives to apply conditional rules to the data to be fetched from the server....

Contact Us