How Sanity + Gatsby + Netlify Work Together using GraphQL
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 .