What types of GraphQL queries are available in GatsbyJS?

In GatsbyJS you can make three types of GraphQL queries: Page Queries, Component Queries & Backend Queries.

Oscar de la Hera Gomez
Written by Oscar de la Hera Gomez
First published on 11/12/2022 at 20:25
Last Updated on 11/14/2022 at 14:57
A flower that represents the GraphQL next to one that represents GatsbyJS. Beneath them sits the text "Available Query Types".

In GatsbyJS you can make three types of GraphQL queries: Page Queries, Component Queries & Backend Queries.

The following article walks you through the three types of queries available to GatsbyJS as well as their benefits and fallbacks.

Download Open Source GatsbyJS Starter ProjectHow to setup Craft CMS to work with the GraphQLHow to setup Gatsby to work with CraftCMS Via the GraphQLOur recommended structure for GraphQL queries in GatsbyJS

Page Queries

A graphic that symbolizes Page Queries.

Page queries only work for pages that are either programmatically generated through the backend or for pages that are found within the Pages folder of your project source.

They can work dynamically by taking parameters that are passed down programmatically through the page context. These context parameters can be accessed using a $. i.e. a slug passed down through the context can be accessed using $slug.

How to programmatically create pages using GraphQL & GatsbyHow to make GraphQL page queries in GatsbyHow to create & use GraphQL fragments in Gatsby

Benefits

Page Queries break up your pages into individual queries that speed up build time.

During development Page Queries speed up development time as they only gather the required query when you load the page. This implies that you will only load what you need, when you need it.

During build time they speed up development as they call the queries in parallel.

Fall backs

Page Queries cannot be dynamically adapted and must be static and must load within 15 seconds which makes them a liability when gathering large datasets or multiple deep nested queries.

Component Queries

An abstract graphic that represents component queries.

Component Queries only work for functional React Components that return a visible element.

Similar to Page Queries, Component Queries also can access variables passed down by the context through a $. i.e. a slug passed down through the context can be accessed using $slug.

An example of this would be to make a component that returns the SEO based on the entry Id.

Learn more about Component Queries

Benefits

Component Queries can help reduce your page load time by passing that specific data request to a component that loads it independently.

Fallbacks

Component Queries must be static and therefore cannot be dynamically adapted; allowing them only to be enhanced through parameters passed down the context.

Component Queries must load within 15 seconds.

Backend Queries

A graphic that symbolizes Backend Queries

Backend queries are queries made within the gatsby-node.js script in the createPages Gatsby function. These backend queries are often used to create pages programatically, or gather other objects that are relevant and necessary.

How to programmatically create pages using GraphQL & GatsbyHow to create & use backend GraphQL fragments in Gatsby

Benefits

Backend Queries have an extended time out and have to load within 120 seconds.

Backend Queries can be dynamic by creating functional queries that pass down parameters and can make use of backend fragments which are easier to adapt than front end fragments.

If your entire website is done on the backend, it will load the website as a whole meaning browsing it will not require additional load time, per page or static query.

Fallbacks

Backend Queries reduce your development build time as they are loaded upfront and depending on how you load them asynchronously can also lead to a longer build time.

Any Questions ?

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.

SubscribeInquireView All PostsView All ServicesView All Work

Partner with us

We would love to get to know you and see how we can help your organization with its goals and needs.
Let's Talk

Stay Informed

Get occasional updates about our company, research, and product launches.
Subscribe