Get help on Discord

Finding the current Sanity API version for preview setup

8 replies
Last 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 
_const_ client = _await_ getClient({ apiVersion: '2023-01-01' })
is this a right approach? (in terms of having the API date)
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 
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 ''
}
Then I am importing that into my 
sanity.config.js
file:
// 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

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.

Get started for freeExplore the demo

Was this answer helpful?