Troubleshooting Sanity-Gatsby Preview integration

19 replies
Last updated: Nov 24, 2022
Anyone here with experience connecting Sanity to Gatsby Preview? I set it up according to the docs here ( ) and when I click the "Preview" button on a document in Sanity, it just opens a new instance of the Sanity studio desk. Any help is appreciated!
Nov 22, 2022, 8:59 PM
When I check the logs for Sanity's "Gatsby Cloud Previews" webhook, there are no errors, and Sanity thinks the preview is rendering fine.
Nov 22, 2022, 9:10 PM
Could you maybe share some of your own setup?
Nov 22, 2022, 9:12 PM
Sure. My Sanity setup is pretty simple right now. I've got a document type called "Pages," with a single sample page. Here's the relevant part of sanity.json:
  "parts": [
      "name": "part:@sanity/base/schema",
      "path": "./schemas/schema"
      "name": "part:@sanity/desk-tool/structure",
      "path": "./deskStructure.js"
      "implements": "part:@sanity/base/document-actions/resolver",
      "path": "resolveDocumentActions.js"
      "implements": "part:@sanity/dashboard/config",
      "path": "./dashboardConfig.js"
      "implements": "part:@sanity/production-preview/resolve-production-url",
      "path": "./resolveProductionUrl.js"

Nov 22, 2022, 9:14 PM
Here's resolveDocumentActions.js:
import defaultResolve from "part:@sanity/base/document-actions"
import {gatsbyPreviewAction} from "sanity-plugin-gatsby-cloud-preview"

export default function resolveDocumentActions(props) {
    return [...defaultResolve(props), gatsbyPreviewAction]

Nov 22, 2022, 9:14 PM
I used Quick Connect on Gatsby to get the relevant Sanity hooks in Gatsby cloud, so that should be fine
Nov 22, 2022, 9:15 PM
Here's my gatsby-node.js:
exports.createPages = ({graphql, actions}) => {
    const {createPage} = actions

    return graphql(`
        allSanityPage {
            nodes {
                  slug {
    `).then(result => {, index) => {
                    path: node.slug.current,
                    component: require.resolve('./src/templates/page.js'),
                    context: {slug: node.slug.current}


Nov 22, 2022, 9:16 PM
And when I click the Gatsby preview button, I get a URL that starts with
Nov 22, 2022, 9:19 PM
ah did you try it in the deployed studio as well?
Nov 22, 2022, 9:46 PM
Good thought, I did and I get the same kind of URL, just with the domain.
Nov 22, 2022, 9:47 PM
and I think another issue might actually be, the settings in
did you add something here as well?
      "implements": "part:@sanity/production-preview/resolve-production-url",
      "path": "./resolveProductionUrl.js"

Nov 22, 2022, 9:49 PM
Oh yes, I was trying an alternative preview thing
Nov 22, 2022, 9:49 PM
I've taken that out, and the problem remains.
Nov 22, 2022, 9:50 PM
Just wanted to be sure ๐Ÿ™‚
Nov 22, 2022, 9:52 PM
Thank you!
Nov 22, 2022, 9:53 PM
Did you set the
as defined in the guide?
Nov 23, 2022, 10:57 AM
I did, I just set it in a .env file. Is there something I need to do differently there?
Nov 23, 2022, 2:25 PM
Ah, I think I figured out the problem. I set that in an
file, thinking the variable would then be used for dev and prod. I didn't realize I needed separate files!
Nov 23, 2022, 2:58 PM
That was it. Thanks for pointing me in the right direction
user J
Nov 23, 2022, 3:00 PM
Happy to be able to point :saluting_face:
Nov 24, 2022, 12:50 AM

Sanityโ€“ build remarkable experiences at scale

The Sanity Composable Content Cloud is the headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Was this answer helpful?