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.
The following article walks you through the three types of queries available to GatsbyJS as well as their benefits and fallbacks.
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.
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
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.
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
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.
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.