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, you’ll need to update your source plugin and configure your CMS.is a service that synchronizes your CMS, Gatsby Cloud, source plugins, and Gatsby Core to properly track content changes across builds. To enable
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.
Install gatsby-plugin-gatsby-cloud, version 4.7.0 or later.
npm install gatsby-plugin-gatsby-cloud
gatsby-plugin-gatsby-cloud will cause Gatsby Cloud to auto-install the latest version for you.
4. Configure your CMS
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.
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:
- 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.
- 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: