Blazing fast development with Gatsby and Sanity.io

Written by Knut Melvær

We would prefer everything to be real-time. So we built the Sanity studio and backend from the ground up to enable real-time collaboration, and made sure there were real time-client APIs from day one. We always wanted Sanity front-ends to also reflect content changes in real-time, we just didn't know of a cost effective way to accomplish this for everyday needs.

Then someone showed us Gatsby Preview. A general way to get real-time preview that did not involve a great deal of custom plumbing! Our new Sanity Gatsby Source Plugin uses the Sanity real-time API to instantly rebuild when content changes. When developing this means a group of people can freely work together on content models, UI design and the content itself. In real-time. Without rebuilds. It feels great!

You can experience it with the example company website we built for this launch. We ship it in a monorepo along with a Sanity project that has models for things like case studies and blogging. It's pretty minimal to make it easier to extend.

The box contains:

A company website built with Gatsby

• 📡 Real-time content preview in development
• ⏱ Fast & frugal builds
• 🗃 No accidental missing fields/types
• 🧰 Full Render Control with Portable Text
• 📸 gatsby-image support
• 🔧 Minimal configuration
  

Sanity Studio with schemas for

• 🏢 Company info
• 📃 Pages
• 👨🏼‍🎨 Projects
• 👩🏾‍💻 People
• 📰 Blog posts

Watch a walk-through of setting it up:

About the Gatsby Source Plugin for Sanity

You add the source plugin to your Gatsby project

with npm i gatsby-source-sanity, and explore the configuration options in the GitHub repo:

Minimal Configuration

Gatsby provides one of the easiest ways to create a React front-end for your Sanity.io project. The source plugin gives you a comprehensive GraphQL API in Gatsby to all your content – right out of the box. We strongly recommend using the GraphiQL explorer to test queries and get familiar with the schema documentation. It's super useful!

To get started with the Gatsby source plugin, install it in your Gatsby project:

yarn add gatsby-source-sanity# or npm install gatsby-source-sanity --save

Once installed, add this configuration to gatsby-config.js: