Best practices for using Sanity, Gatsby, and Netlify together

4 replies
Last updated: May 29, 2020
Using Sanity + Gatsby + Netlify, is the “best” option to get all the data your site needs at the top of the app and then pass it all down through props?
If you have graphql queries to sanity on each component, would they each get classed as 1 api request each, so potentially hundreds/thousands of api calls per build? When you could just call everything at the top and use 1 call? Or is Gatsby smarter and bulk calls? I guess it cant as the component queries rely on vars/data returned in the top call
AI Update

Great question! The good news is you don't need to worry about making hundreds or thousands of API calls with the Gatsby + Sanity setup. Gatsby is indeed "smarter" than that, and here's how it actually works:

How gatsby-source-sanity Actually Works

The gatsby-source-sanity plugin only makes two API requests during the entire build process, regardless of how many GraphQL queries you have in your components. Here's what happens:

  1. First request: Fetches the GraphQL schema definitions from Sanity's deployed GraphQL API
  2. Second request: Streams all accessible documents from your Sanity project using the export endpoint

This data is then loaded into Gatsby's local GraphQL data layer (an in-memory datastore). All your page queries, static queries, and component queries are executed against this local data layer at build time—not against Sanity's API.

The Answer to Your Question

You don't need to fetch everything at the top and pass it down through props. In fact, that's not the Gatsby way! Instead:

  • Use page queries in your page components to fetch the specific data each page needs
  • Use useStaticQuery or StaticQuery in your regular components for component-specific data
  • Each query executes against Gatsby's local data layer (no additional API calls)

The only limitation is that useStaticQuery and StaticQuery cannot accept variables—they must be static queries. If you need variables (like getting data based on a page slug), use page queries instead.

Best Practices

For the Gatsby + Sanity + Netlify stack:

  • Let each page/component query exactly what it needs
  • Don't worry about "over-querying"—it's all local after the initial source
  • Use page queries when you need dynamic data based on URL params
  • Use useStaticQuery for static component data (like site metadata, navigation, etc.)
  • Enable watchMode: true in development for real-time content updates without rebuilding

The plugin architecture is specifically designed to be efficient, so embrace Gatsby's data layer rather than trying to work around it!

Quick sidenote on how the Sanity source plugin works
When starting Gatsby in development or building a website, the source plugin will first fetch the GraphQL Schema Definitions  from Sanity deployed GraphQL API. The source plugin uses this to tell Gatsby which fields should be available to prevent it from breaking if the content for certain fields happens to disappear. Then it will hit the project’s export endpoint, which streams all the accessible documents to Gatsby’s in-memory datastore.
In order words, the whole site is built with two requests. Running the development server, will also set up a listener  that pushes whatever changes come from Sanity to Gatsby in real-time, without doing additional API queries. If we give the source plugin a token with permission to read drafts, we’ll see the changes instantly. This can also be experienced with Gatsby Preview .
tl;drQuery any way you want with our source-plugin. It only takes 2 requests against our APIs however you're doing it.
Oh that is so cool. Really clever for Gatsby to cache every document rather than fire off a bunch of queries to live api’s. Thanks for the explanation 👍

Sanity – Build the way you think, not the way your CMS thinks

Sanity is the developer-first content operating system that gives you complete control. Schema-as-code, GROQ queries, and real-time APIs mean no more workarounds or waiting for deployments. Free to start, scale as you grow.

Was this answer helpful?