Troubleshooting Sanity-Gatsby Preview integration
19 replies
Last updated: Nov 24, 2022
V
Anyone here with experience connecting Sanity to Gatsby Preview? I set it up according to the docs here (https://support.gatsbyjs.com/hc/en-us/articles/4877130019731-Install-Preview-Extension-for-Sanity ) 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
V
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
S
Could you maybe share some of your own setup?
Nov 22, 2022, 9:12 PM
V
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
V
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
V
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
V
Here's my gatsby-node.js:
exports.createPages = ({graphql, actions}) => {
const {createPage} = actions
return graphql(`
{
allSanityPage {
nodes {
title
_rawPageContent
slug {
current
}
}
}
}
`).then(result => {
result.data.allSanityPage.nodes.forEach((node, index) => {
createPage({
path: node.slug.current,
component: require.resolve('./src/templates/page.js'),
context: {slug: node.slug.current}
})
}
)
})
}Nov 22, 2022, 9:16 PM
V
And when I click the Gatsby preview button, I get a URL that starts with
<http://localhost:3333/desk/undefined/gatsby-source-sanity/>
Nov 22, 2022, 9:19 PM
S
ah did you try it in the deployed studio as well?
Nov 22, 2022, 9:46 PM
V
Good thought, I did and I get the same kind of URL, just with the .sanity.studio domain.
Nov 22, 2022, 9:47 PM
S
and I think another issue might actually be, the settings in
resolveProductionUrldid you add something here as well?
{
"implements": "part:@sanity/production-preview/resolve-production-url",
"path": "./resolveProductionUrl.js"
}Nov 22, 2022, 9:49 PM
V
Oh yes, I was trying an alternative preview thing
Nov 22, 2022, 9:49 PM
V
I've taken that out, and the problem remains.
Nov 22, 2022, 9:50 PM
S
Just wanted to be sure 🙂
Nov 22, 2022, 9:52 PM
V
Thank you!
Nov 22, 2022, 9:53 PM
S
Did you set the
SANITY_STUDIO_CONTENT_SYNC_URLas defined in the guide?
Nov 23, 2022, 10:57 AM
V
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
V
Ah, I think I figured out the problem. I set that in an
envfile, 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
V
That was it. Thanks for pointing me in the right direction
user J
!Nov 23, 2022, 3:00 PM
S
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.