Enable Content Sync and Preview Status Indicator

When content editors click Open Preview in their CMS, Content Sync and Preview Status Indicator work together to route them to the correct URL and understand when their content is ready to preview.

Content Sync is a service that synchronizes your CMS, Gatsby Cloud, source plugins, and Gatsby Core to properly track content changes across builds. To enable Content Sync, you’ll need to update your source plugin and configure your CMS.

Preview Status Indicator is a UI element enabled via gatsby-plugin-gatsby-cloud.

Instructions for Upgrade

1. Upgrade to the latest version of Gatsby 3 or 4

Learn more about upgrading Gatsby minor releases

2. Upgrade your source plugin at least to the version which includes Content Sync support

Support for DatoCMS and Sanity will be available very soon.

3. Upgrade gatsby-plugin-gatsby-cloud

Install gatsby-plugin-gatsby-cloud, version 4.7.0 or later.

npm install gatsby-plugin-gatsby-cloud

Alternatively, uninstalling gatsby-plugin-gatsby-cloud will cause Gatsby Cloud to auto-install the latest version for you.

4. Configure your CMS

You can find your Content Sync URL under Site Settings → General → Content Sync inside Gatsby Cloud. Use Quick Connect or enter this manually.

5. Optionally, configure ownerNodeId

Most Gatsby sites will work with Content Sync out of the box. If for example you query by slug for content, rather than a unique id, you may need to set an ownerNodeId. ownerNodeId helps Gatsby understand which node owns a page on your site.

Learn how to configure ownerNodeId

You're all set!

Now when content editors click Open Preview they’ll experience a more streamlined Preview experience. This new Preview experience splits into two flows:

1. If content hasn’t been previewed before: when editors click Open Preview, they’ll be taken to the Content Sync waiting room until Preview has completely finished and then redirected.
2. If content has been previewed before: when editors click Open Preview, they’ll be immediately redirected to the existing page while they wait for the content on this page to be updated. Preview Status Indicator will let them know when preview is finished updated.

What should this look like? Watch below:

Disabling the Preview Status Indicator

Your team may include Content Managers who need to take screen captures of content changes for review. In that case, you may wish to hide the preview status indicator either temporarily or permanently. You can accomplish this in two ways:

1. Setting the GATSBY_PREVIEW_INDICATOR_ENABLED= preview environment variable to false in the site settings:
   
   
   
2. Adding a disablePreviewUI property with a value of true to the gatsby-plugin-gatsby-cloud options in your gatsby-config.js file, e.g

   module.exports = {
     plugins: [
       {
         resolve: `gatsby-plugin-gatsby-cloud`,
         options: {
           ...
           disablePreviewUI: true
         },
       },
     ]
   }