Adding the Gatsby Cloud Extension to DatoCMS

What is the Gatsby Cloud DatoCMS plugin?

A plugin that installs a Gatsby Cloud extension in a DatoCMS project. This is especially valuable for content editing workflows.

Prerequisites

The site must be set up with a Gatsby Cloud instance. Please see “Getting Started with Gatsby Cloud and DatoCMS”.

Installing the plugin

In DatoCMS, add the Gatsby Cloud DatoCMS plugin to the project in Settings > Plugins.

Configuring the plugin

Please specify a Gatsby Cloud Content Sync URL to utilize the Content Sync functionality with Gatsby Preview (https://www.gatsbyjs.com/docs/conceptual/content-sync/). 

The plugin is backwards-compatible with the legacy version of Preview, which requires the instance URL. Also, you can optionally input an authToken on the plugin settings page.

Assigning the plugin to a field

The Gatsby Cloud plugin can be assigned to the slug field. Please see the DatoCMS documentation on assigning a plugin to a field.

What does the final result look like in DatoCMS?

Once you’ve configured the plugin, anyone editing content will be able to see the Gatsby Cloud “open preview” button below each slug field.

You can navigate to the preview instance by clicking “Open preview”. A webhook is sent to your Gatsby Cloud Preview site every time you open your preview. Content Sync will display a loading page while your preview content builds and then will automatically find and redirect you to the correct page when it's available to view.

Plugin options

Make sure that in your gatsby-config.js file, the gatsby-source-datocms plugin’s previewMode is set to true. See the plugin documentation for more details on the options and usage.