GraphQL | Query - GeeksforGeeks

23 Mar, 2020
We will use GraphQL API for demonstration. GraphQL is an open-source data query and manipulation language for APIs and a runtime for fulfilling queries with existing data. It’s neither an architectural pattern nor a web service. GraphQL was developed internally by Facebook in 2012 before being publicly released in 2015.
Terms: Let’s start by defining basic terms. For reference, consider the following sample operation.
GraphQL Operations: As a basic definition, anything that hits the server is called a ‘query’. But formally, there are three types of Operations, and Query is just one of them and the other two are Mutations, Subscriptions. A string is written in the GraphQL language that defines one or more operations and fragments. We will use the ready-made example of Pokemon schema in this article you can also create your own schema.
GraphQL Query: A GraphQL query is used to read or fetch values. It is given to the GraphQL server for execution and a result is returned.
Fields: A unit of data that will be returned as part of a query response is known as a Fields, even if they are nested. The query structure and the result of that query’s structure will be the same as you can see in the below diagram.Query:{
  pokemon(name:"pikachu") {
    name
    id
    types
  }
}Output:
{
  pokemon(name:"pikachu") {
    name
    id
    types
  }
}
Output:
Arguments: Arguments help to resolve a query on the server-side in a specific way. It is a key:value pair supplied with a field. It can be a literal or a variable as well in the fields example we already used arguments on pokemon by providing specific name.Query:{
  pokemon(id:"UG9rZW1vbjowMDE") {
    name
    types
  }
}Output:
{
  pokemon(id:"UG9rZW1vbjowMDE") {
    name
    types
  }
}
Output:
Aliases: In case two individual queries on the same fields are to be done, we can use ‘aliases’ to distinguish both the queries. These aliases are added like prefixes to the query. For example, if we want to retrieve two pokemon and name them as ‘firstPokemon’ and ‘secondPPokemon’.Query:query retrievePokemon{
  firstPokemon: pokemon(name:"Pikachu") {
    id
    types
  }
  secondPokemon: pokemon(name:"Charizard") {
    id
    types
  }
}Output:
Query:
query retrievePokemon{
  firstPokemon: pokemon(name:"Pikachu") {
    id
    types
  }
  secondPokemon: pokemon(name:"Charizard") {
    id
    types
  }
}
Output:
Fragments: GraphQL provides the power to make a sub-type of query fields that can be used again and again using an identifier attached to it. It is known as a fragment and is supplied as ...fragmentName. Getting multiple objects, each with possibly different fieldsSyntax:fragment basicInfoOfPokemon on Pokemon {
  name
  id
}

query retrievePokemon {
  firstPokemon: pokemon(name: "pikachu") {
    ...basicInfoOfPokemon
    types
    weight{
      minimum
      maximum
    }
    classification
  }
}Output:
fragment basicInfoOfPokemon on Pokemon {
  name
  id
}

query retrievePokemon {
  firstPokemon: pokemon(name: "pikachu") {
    ...basicInfoOfPokemon
    types
    weight{
      minimum
      maximum
    }
    classification
  }
}
Output:
Operation Name: Till now we are using shorthand syntax, we can also omit query keyword and name. In this example, we add a query keyword as an operation type and Electrictype as operation name.Syntax:query Electrictype {
  pokemon(name: "pikachu") {
    name
    weight {
      minimum
      maximum
    }
  }
}Output:
query Electrictype {
  pokemon(name: "pikachu") {
    name
    weight {
      minimum
      maximum
    }
  }
}
Output:
Directives: The ‘directives’ influence the results that come back. The common one is ‘skip’ and ‘include’ combined with an ‘if’.@skip: If you want to ‘skip’ a particular field on a particular ‘if’ condition, you can use.Syntax:fieldName @skip (if: booleanCondition) {
  name
}
# The @skip acts like a default inclusion of 
# The field, unless the 'if' is valid.Output:@include If you want to ‘include’ a particular field on a particular ‘if’ condition, you can use.Syntax:fieldName @include (if: booleanCondition) {
  name
}
# The @include acts like a default exclusion of 
# The field, unless the 'if' is valid.
Output:My Personal Notes
arrow_drop_upSave
@skip: If you want to ‘skip’ a particular field on a particular ‘if’ condition, you can use.Syntax:
fieldName @skip (if: booleanCondition) {
  name
}
# The @skip acts like a default inclusion of 
# The field, unless the 'if' is valid.
Output:
@include If you want to ‘include’ a particular field on a particular ‘if’ condition, you can use.Syntax:
fieldName @include (if: booleanCondition) {
  name
}
# The @include acts like a default exclusion of 
# The field, unless the 'if' is valid.

Output:
GraphQL
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Remove elements from a JavaScript Array
Convert a string to an integer in JavaScript
How to fetch data from an API in ReactJS ?
Difference between var, let and const keywords in JavaScript
Differences between Functional Components and Class Components in React
How to apply style to parent if it has child with CSS?
How to execute PHP code using command line ?
Difference Between PUT and PATCH Request
REST API (Introduction)
How to redirect to another page in ReactJS ?