Finding the current Sanity API version for preview setup
8 repliesLast updated: Jan 4, 2023
Hey all! Whats the best place to find the current, most updated Sanity API version?
The recommended practice it to just use the current date when you first configure your client. Don't use a dynamic date, as that can cause problems. TBH, though, I think the only versions that have differences are
vX,
v1, and anything with a date string version. Meaning, all of the date strings are actually using the same version.
Okay great thank you!
You're welcome!
Actually.. I may need further explanation with what I am working with:
I am trying to set up a basic preview using
is this a right approach? (in terms of having the API date)
I am trying to set up a basic preview using
_const_ client = _await_ getClient({ apiVersion: '2023-01-01' })Yeah! That's how you'd pass in the version. What context are you using the client in?
I am creating a semi-advanced preview using the
`content-preview.js`:
Then I am importing that into my
sanity-plugin-iframe-pane.. I have the following:
`content-preview.js`:
import Iframe from 'sanity-plugin-iframe-pane'
// list of schema types supporting preview
const previewSchemaTypes = ['homePage', 'project', 'post', 'page']
// Default document node:
// Add preview view if part of list
export const defaultDocumentNode = (S, { schemaType }) => {
const frontendUrl = '<http://localhost:3000>'
if (previewSchemaTypes.includes(schemaType)) {
return S.document().views([
S.view.form(),
S.view
.component(Iframe)
.title('Preview')
.options({
url: (doc) => resolveProductionUrl({ doc, context: S.context, frontendUrl }),
defaultSize: 'desktop',
reload: {
button: true
},
attributes: {
allow: 'fullscreen'
}
})
])
}
}
// Resolve production url
export const resolveProductionUrl = async ({ doc, context, frontendUrl }) => {
const { getClient } = context
if (!doc) {
doc = context.document
}
if (previewSchemaTypes.includes(doc._type)) {
const client = await getClient({ apiVersion: '2023-01-01' })
const slug = await client.fetch(`*[_id == $id][0].slug.current`, { id: doc._id })
// Build preview url
const url = new URL(frontendUrl)
// Switch for resolving doc type urls
switch (doc._type) {
case 'homePage':
url.pathname = `/`
break
case 'page':
url.pathname = `/${slug}`
break
case 'project':
url.pathname = `/projects/${slug}`
break
case 'post':
url.pathname = `/posts/${slug}`
break
default:
break
}
// Add preview url params
url.searchParams.set('preview', 'true')
return url.toString()
}
return ''
}sanity.config.jsfile:
// Previews
import { defaultDocumentNode } from './config/content-preview'
import { resolveProductionUrl } from './config/content-preview'
export default defineConfig({
... // client stuff
plugins: [
deskTool({
structure,
defaultDocumentNode
})
],
document: {
productionUrl: async (prev, context) =>
resolveProductionUrl({
context,
frontendUrl: '<http://localhost:3000>'
})
}
})This is all working fine, but I still cant get it to update when I am editing/within a Draft because there isn't enough documentation with using Previews and Nuxt3 just yet... This is fine though as I am able to see the preview once I publish the actual page. I was mainly just wondering about how to query the API date haha.
I actually dont think previewkit supports Vue/Nuxt yet
Was this answer helpful?
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.
