Connecting to Sanity via Quick Connect

This guide will show you how to connect your Gatsby Cloud site to Sanity using the Quick Connect feature.

Prerequisites

This guide assumes you already:

• have a Gatsby project in a GitHub repository
• have a Sanity project with content that your project understands
• are familiar with how to create a Gatsby Cloud site from a repository
• have the correct settings in gatsby-source-sanity options for Preview

If you have already created a Gatsby Cloud site, but did not connect it to Sanity, you can do so via Site Settings. See the Quick Connect reference guide for background info on the feature.

1. Generate Read Token

First, log in to your Sanity account at manage.sanity.io and open your project. Go to Settings > API then click the Add New Token button in the Token section.

Provide an appropriate label for the token, select the Read radio button, then click Add New Token.

Copy the generated token and save it for later; you need this in step 3 and once you close the modal there is no way to get it back. If you lose the token, you will have to create another.

2. Configure the Sanity Integration

Start creating a Gatsby Cloud site using the Import from a Repository flow. Once you reach step 4, "Add Optional Integrations," click Connect for the Sanity integration.

Next, click Authorize to allow the Sanity integration to configure your CMS automatically. You will then be prompted by Sanity to authorize the Gatsby Cloud app.

After authorizing, choose which project and dataset to connect to and click Continue.

You'll receive confirmation that webhooks and environment variables have been configured for you. Click Set up your site.

3. Configure Environment Variables

On the next screen, you'll see that Gatsby Cloud has automatically detected some of your project's environment variables.

For the SANITY_READ_TOKEN variable, set the value to the token you generated earlier. Note, auto-detected variables are read from your project's gatsby-config.js file, so your variable may have a different name. This variable name is based on gatsby-config.js from Sanity's sanity-template-gatsby-blog. If you have used environment variables anywhere else, you may need to add them manually.

Automatically Configured Variables

You will also see that the integration automatically configured the following variables:

Build and Preview Variables

Verify that both Build variables and Preview variables are set correctly, delete any unneeded variables, then click Save and Create site. Your site will be created and start building immediately.

Other Considerations

You may also want to install the Sanity Preview Extension so that you can open your CMS Previews directly from Sanity.