How to optimize GraphQL queries in GatsbyJS

Oscar de la Hera Gomez
A flower that represents GraphQL next to one that represents GatsbyJS. Beneath it sits the text "Optimized GraphQL Queries".

Learn how you can implement optimized frontend and backend GraphQL queries in GatsbyJS.

The following article walks you through our learnings from the past 3 years of building large, scalable GatsbyJS websites powered by a CraftCMS through the GraphQL.

Recommendations for simple pages with small datasets

A colorful picture of the GraphQL Logo.

For simple pages with small datasets (i.e. those without deeply nested, variable queries), we recommend that you gather all the page slugs in the backend and programmatically create pages for each slug, based on templates that match each relevant page layout.

Within these templates, we recommend you include a page query that handles the remainder of the data, with component queries for each relevant data-driven component.

Each of these pages should be filtered to the adequate page type and slug.

Finally, to make your code as reusable as possible, we recommend creating as many GraphQL fragments as possible.

Recommendations for complex pages with large datasets

A network of nodes that connect to the GraphQL logo.

For complex pages with large datasets, like all the information for search, we recommend that you use backend queries. These queries should be made asynchronously to speed up load time, and if there are too many or they are too large, should be split into asynchronous calls of 8-12 queries at a time.

We recommend that you make these queries as small as possible by filtering them to match the specific object or entry that you are looking for.

Additionally, to reduce copying code and making your queries are reusable as possible, these backend queries should be broken down into as many fragments are possible.

Finally, to avoid extraordinary load times for large datasets, we recommend paginating these queries.

Recommendations for data that is used everywhere

An illustration of buildings behind a GraphQL logo.

For data that is used everywhere, such as the Navigation Bar, Footer or Styleguide, we recommend that you make backend queries and feed them to each page via the context.

Any Questions?

We are actively looking for feedback on how to improve this resource. Please send us a note to with any thoughts or feedback you may have.

delasign logo

Book a Free Consultation.

An icon of an email.

Click here to email us.

Fill in the details below to book a free consultation or to let us know about something else. Whatever it is, we are here to help.

How can we help you ?

Contact Details