Understanding and implementing productionURL in Sanity v3 using the sanity-plugin-iframe-pane plugin.
10 replies
Last updated: Dec 19, 2022
H
Is there an easier way to do the productionURL? dont quite understand what i need from the guide or not.
Dec 9, 2022, 12:30 PM
A
As far as I can recall, you need to replace:
with:
const { client, dataset, document } = contextconst { getClient, dataset, document } = contextDec 9, 2022, 1:50 PM
H
Guess theres an typo in the docs then? Will try later
Dec 9, 2022, 1:51 PM
H
user E
could you help me some more? did you also mean contextand not
content?
Dec 9, 2022, 1:58 PM
A
Yes
If it helps, here’s my config using Sanity v3 and the
You will probably need to tweak the preview pathnames to fit your own needs here.
user U
, apologies for the typo - fixed.If it helps, here’s my config using Sanity v3 and the
sanity-plugin-iframe-paneplugin.
// sanity.config.js
import { defineConfig } from 'sanity'
import { deskTool } from 'sanity/desk'
import { schemaTypes } from './schemas'
import { structure } from './studio-config/structure'
import { defaultDocumentNode } from './studio-config/views'
export default defineConfig({
name: 'default',
title: <title>,
projectId: <projectId>,
dataset: <dataset>,
plugins: [
deskTool({
structure,
defaultDocumentNode
}),
visionTool()
],
schema: {
types: schemaTypes
},
})// ./studio-config/views
import Iframe from 'sanity-plugin-iframe-pane'
// Specify document types
const previewSchemaTypes = ['page', 'post']
export const defaultDocumentNode = (S, { schemaType }) => {
// Add previews for specified schema types
if (previewSchemaTypes.includes(schemaType)) {
return S.document().views([
S.view.form(),
S.view
.component(Iframe)
.title('Preview')
.options({
url: (doc) => resolveProductionUrl(doc, S.context),
defaultSize: 'desktop',
reload: {
button: true,
revision: true
},
attributes: {
allow: 'fullscreen' // string, optional
}
})
])
}
}
const resolveProductionUrl = async (doc, context) => {
const { getClient } = context
if (previewSchemaTypes.includes(doc._type)) {
const client = await getClient({ apiVersion: '2022-06-07' })
const slug = await client.fetch(`*[_id == $id][0].slug.current`, { id: doc._id })
// Build preview url
const url = new URL(<your_base_preview_url_goes_here>)
// Switch for resolving doc type urls
switch (doc._type) {
case 'page':
url.pathname = `/${slug}/`
break
case 'post':
url.pathname = `/posts${slug}`
break
default:
break
}
// Add preview url params
url.searchParams.set('preview', 'true')
return url.toString()
}
return doc
}Dec 9, 2022, 1:59 PM
A
As per the above code snippet, here’s how I do the fetch:
Note I await the
const client = await getClient({ apiVersion: '2022-06-07' })
const slug = await client.fetch(`*[_id == $id][0].slug.current`, { id: doc._id })getClientbefore I do the fetch.
Dec 9, 2022, 2:12 PM
H
Thanks for the help
user E
! Trying to implement this later tonightDec 9, 2022, 5:15 PM
A
Hope all goes well
user U
- let me know how you get on 😃Dec 12, 2022, 2:43 PM
H
Is there anything you have on each document inside deskTool to enable this preview?
Dec 19, 2022, 12:02 PM
H
And how does your imports looks like inside the
defaultDocumentNode
Dec 19, 2022, 12:03 PM
H
Currently not working, but i imagine im missing a few imports. A
Dec 19, 2022, 12:20 PM
Sanity – Build the way you think, not the way your CMS thinks
Sanity is the developer-first content operating system that gives you complete control. Schema-as-code, GROQ queries, and real-time APIs mean no more workarounds or waiting for deployments. Free to start, scale as you grow.