What types of GraphQL queries are available in GatsbyJS?

Oscar de la Hera Gomez
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.

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.


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.


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


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.


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.


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.

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