Using GraphQL Fragments
Fragments allow you to reuse parts of GraphQL queries. It also allows you to split up complex queries into smaller, easier to understand components.
The building blocks of a fragment
Here is an example fragment:
A fragment consists of three components:
FragmentName: the name of the fragment that will be referenced later.TypeName: the GraphQL type of the object the fragment will be used on. This is important because you can only query for fields that actually exist on a given object.- The body of the query. You can define any fields with any level of nesting in here, the same that you would elsewhere in a GraphQL query
Creating and using a fragment
A fragment can be created inside any GraphQL query, but it’s good practice to create the query separately. More organization advice in the Conceptual Guide.
This defines a fragment named SiteInformation. Now it can be used from within the page’s GraphQL query:
When compiling your site, Gatsby preprocesses all GraphQL queries it finds. Therefore, any file that gets included in your project can define a snippet. However, only Pages can define GraphQL queries that actually return data. This is why you can define the fragment in the component file - it doesn’t actually return any data directly.