How to optimize 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.

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.

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.

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.

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