Understanding and implementing productionURL in Sanity v3 using the sanity-plugin-iframe-pane plugin.

const { client, dataset, document } = context

const { getClient, dataset, document } = context

// 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
}

const client = await getClient({ apiVersion: '2022-06-07' })
const slug = await client.fetch(`*[_id == $id][0].slug.current`, { id: doc._id })