nuxt-modules / sanity

Sanity integration for Nuxt
https://sanity.nuxtjs.org
MIT License
223 stars 33 forks source link

Unable to access drafts in Studio preview (Iframe) #1062

Open gduteaud opened 4 weeks ago

gduteaud commented 4 weeks ago

Version

module: 1.12.1 nuxt: 3.12.4

Nuxt configuration

nuxt.config.ts

export default defineNuxtConfig({
...
sanity: {
    projectId: "[my actual project ID]",
    dataset: process.env.SANITY_DATASET,
    apiVersion: "2024-09-24",
    withCredentials: true,
  },
})

Reproduction

Steps to reproduce

Install Iframe Pane plugin in Sanity Studio

Sanity setup:

sanity.config.js

import {defineConfig} from 'sanity'
import {structureTool} from 'sanity/structure'
import {visionTool} from '@sanity/vision'
import {schemaTypes} from './schemaTypes'
import {defaultDocumentNode} from './src/defaultDocumentNode'

export default defineConfig([{
    name: 'developmentWorkspace',
    title: 'Solume (Development)',
    projectId: '[my actual project ID]',
    dataset: 'development',
    basePath: '/development',
    icon: Logo,
    plugins: [
      structureTool({
        defaultDocumentNode
      }),
      visionTool(),
    ],
    schema: {
      types: schemaTypes,
    },
  },
])

defaultDocumentNode.js

import {Iframe} from 'sanity-plugin-iframe-pane'
import { resolveBaseUrl } from './resolveBaseUrl'

export const defaultDocumentNode = (S, {schemaType}) => {
  switch (schemaType) {
    case `post`:
      return S.document().views([
        S.view.form(),
        S.view
          .component(Iframe)
          .options({
            url: (doc) => `${resolveBaseUrl()}/blog/${doc.slug.current}?preview=true`,
            reload: {
              button: true, // default `undefined`
            },
          })
          .title('Preview'),
      ])
    default:
      return S.document().views([S.view.form()])
  }
}

Note: resolveBaseUrl() just returns either my prod domain or localhost depending on the current environment.

Nuxt setup:

In addition to my config in the dedicated section above, here is a minimal reproduction of the specific page I'm previewing in Sanity Studio:

[slug].vue

<script setup>
const route = useRoute();
const slug = route.params.slug;

const query = groq`
*[_type == "post" && slug.current == $slug] | order(_updatedAt desc)[0]
`;

const { data: post } = await useSanityQuery(query, { slug });
console.log(post);
</script>

<template>
  <main>
        <h1>{{ post.articleTitle }}</h1>
        <p>By {{ post.author.name }}</p>
        <p>Published on: {{ formatDate(post.publishedAt) }}</p>
        <SanityContent :blocks="post.body" :serializers="serializers" />
  </main>
</template>

What is expected?

I would expect to see the latest draft of the post I'm previewing in my Sanity Studio preview iframe.

What is actually happening?

I can only see the latest published version.

Additional information

This seems to be a similar issue to 799 except I already have withCredentials set to true in my Nuxt config and yet I'm still not able to see drafts in my Sanity Studio iframe.

Checklist

plcdnl commented 4 days ago

https://www.sanity.io/docs/perspectives

you should add the new option perspectives