👀 See Sanity in action: Watch product demo now →

How Sanity + Gatsby + Netlify Work Together using GraphQL

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
May 28, 2020, 8:05 PM
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 .
May 28, 2020, 8:11 PM
tl;drQuery any way you want with our source-plugin. It only takes 2 requests against our APIs however you're doing it.
May 28, 2020, 8:11 PM
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 👍
May 29, 2020, 9:42 AM

Sanity.io – build remarkable experiences at scale

Sanity is a customizable solution that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.