GraphQL AST — GraphQLTag — Part Three

Janel John Janson
2 min readFeb 21, 2021

--

In this article we are going to talk about on how Fragments are being parsed.

There are two ways how fragments are being used in GraphQL. The one that is declared and the inline.

Declared Fragments

These are great and ideal approach for better code reusability.

Query:

Declared fragments used in queries

Parse Result:

declared fragment parse result

Here we can see at the property definitions, the fragment was being declared with an object that has a kind FragmentDefinition. We can also observed that the object is more likely similar to the OperationDefinition, and has the added property typeCondition to determine what type does the fragment refers to.

After the fragment has been defined, in our query we can see that the fragment was being used as part of the query on the me. Inside the SelectionSet, there is an entry that has a kind FragmentSpread with the name that has a value of person.

Inline Fragment

Are fragments that you used inside the selection set that refers to a specific type with a set of fields being queried.

Query:

inline fragment query

Parse result:

inline query parse result

Here we can see that there is an object with kind InlineFragment in the selection set, unlike the declared fragment, it uses the FragmentSpread, with the same property set and values with FragmentDefinition aside from the kind.

Conclusion

We have seen how graphql transformed our queries into AST.

Be able to understand how it is being done will unlock other opportunities when it comes to small optimizations that we can do in our queries and mutations. As simple as determining what are the fields that is being queried, and retrieve only that fields to the db, cache, etc.. to a more complex and optimized approach.

--

--