GraphQL AST — GraphQLTag — Part One

Upon reading the article, this assumes that you already have the basic foundation when it comes to the GraphQL, as we will not discuss it here on. And if you don’t understand the basics of it and haven’t run a GraphQL server, I suggest don’t continue reading on this.

Understanding how GraphQL parses the query and use it to its internal resolvers will have a great advantage when it comes to small tweaks and optimizations. You will have more fine-grain control, with your queries and mutations behaviors.

graphql-tag is used to parsed the query into Abstract Syntax Tree or known as AST.

To understand the structure of a parsed query, we are going to execute the following code.

import gql from 'graphql-tag';
console.dir(
  gql`
    # put your query here
  `,
  { depth: null }
)

Let’s do simple queries to understand the AST structure.

Query

Result

The parsed object will have the properties kind, definitions, and loc (which is omitted, this is an instance of Location).

In this case, the kind will always be a Document. While most of the interesting part is on the definitions.

definitions is an array of operations like,

query {
  me
}
mutation {
  you
}

This would result in a 2 entry on the definitions. Each definition item has the following properties.

• kind - will always be OperationDefinition
• operation - values would be query or mutation
• name - an object that holds the kind and its value. This will be used to retrieve the name of the operation.
• variableDefinitions - array of an object that holds the information regarding the variables being defined on the query
• directives - array of objects for the directives, in this case, it would be empty
• selectionSet - is an array that contains the information of what is are the information or properties that is being selected for presenting

selectionSet is where most of the interesting parts when we are concern about the fields to be queried.

Each item on the selectionSet has the following properties.

• kind - will always be a SelectionSet
• selections - an array that contains the selection field information.

These are the following properties for each item on the selections.

• kind - this will always be a Field
• alias - the information of the field that has been aliased. This will only be present when there is a field being aliased. This will be undefinedwhen there is no alias has been defined.
• name- an object that holds the information for the name of the field that will be used for the output.
• arguments- array of an object that contains the information of the argument. This will be an empty array when there is no argument being defined
• directives- array of an object that holds the information for the directives defined on the query
• selectionSet- array of an object of the deeper information of the selection set.

Stay tuned for more updates, as we discuss further regarding the in-depth details for each object's properties.