RetroSearch Browse

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://www.gatsbyjs.com/docs/reference/graphql-data-layer/using-graphql-fragments/ below:

Website Navigation

Docs
Docs

Using GraphQL Fragments | Gatsby

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.