reactjs - Hvordan tilpasse forhåndsvisningsmodus i Sanity Studio med Nextjs

Jeg har problemer med å vise forhåndsvisningsmodus fordi URL-en må inneholde noen få parametere som "category" og "slug". (eksempel i bildet mitt nedenfor).

Dette er feilen URL med udefinert parameter

Så, jeg får ikke parameteren for URL-en min

Dette er koden min

// structure.ts

interface Doc extends SanityDocument {
  slug: { current: any };
  categories: {
    title: string;
    description: string;
  };
}

function getPreviewUrl(doc: Doc) {
  return doc?.slug?.current
    ? `${process.env.NEXT_PUBLIC_VERCEL_URL || window.location.host}/articles/${
        doc.categories.title
      }/${doc.slug.current}`
    : `${process.env.NEXT_PUBLIC_VERCEL_URL || window.location.host}`;
}

export const defaultDocumentNode = (
  S,
  { schemaType },
) => {
  switch (schemaType) {
    case `article`:
      return 
        S.view
          .component(Iframe)
          .options({
            url: (doc: Doc) => getPreviewUrl(doc)
          })
      ]);

    default:
      return S.document().views([S.view.form()]);
  }
};

i koden min ovenfor har jeg implementert en tilpasset komponent for forhåndsvisningsmodus ved å bruke Iframe, og satt alternativet til å få getPreviewUrl, men doc-verdien i denne koden 'url: (doc: Doc) => getPreviewUrl(doc)', returnerer bare standard skjemastrukturdata som inneholder referanser, spesielt for kategoridataene. Så i dette tilfellet vil jeg hente data fra kategoriskjemaet via referanse fra artikkelskjemet mitt, slik at jeg kan bruke dataene i getPreviewUrl-funksjonen.

Dette er for artikkelskjemaet

{
  "author": {
    "_ref": "31c9cd97-6fc3-45d2-a13b-d0dbfa3e4681",
    "_type": "reference"
},
"categories": [
    {
        "_key": "111749138b41",
        "_ref": "581dfb13-ab8c-4da9-8a29-1e052f6ceb76",
        "_type": "reference"
    }
],
"description": "This is the first ever article on my platform!",
"slug": {
    "_type": "slug",
    "current": "my-first-article"
},
"title": "My First Article"

}

dette er mine kategoriskjema strukturddata

category : [ { _id : string, title : string } ]

Hvordan kan jeg hente data fra kategoriskjemaet ved referanse fra artikkelskjemaet mitt? Jeg har lest dokumentasjonen på sanity.io, men har fortsatt ikke fått det til.

Takk for hjelpen!

Svar #1

Jeg har løst problemet mitt ved å endre koden min slik:

import Iframe from 'sanity-plugin-iframe-pane';
import { DefaultDocumentNodeResolver } from 'sanity/desk';
import { SanityDocument } from 'sanity';
import { client } from './lib/sanity.client';

interface Doc extends SanityDocument {
  slug: { current: any };
}

async function getPreviewUrl(doc: Doc) {
  const query = `*[_type == 'article' && _id == $id] {
     categories[0] -> {
       title
     }
 }`;
  const [{ categories }] = await client.fetch(query, { id: doc._id });
  return doc?.slug?.current && categories
    ? `${
        process.env.NEXT_PUBLIC_VERCEL_URL ||
        window.location.protocol + '//' + window.location.host
      }/articles/${categories?.title}/${doc.slug.current}`
    : `${process.env.NEXT_PUBLIC_VERCEL_URL || window.location.host}`;
}

export const defaultDocumentNode: DefaultDocumentNodeResolver = (
  S,
  { schemaType },
) => {
  switch (schemaType) {
    case `article`:
      return S.document().views([
        S.view.form(),
        S.view
          .component(Iframe)
          .options({
            url: (doc: Doc) => getPreviewUrl(doc),
            defaultSize: 'desktop',
            reload: { button: true },
            attributes: {},
          })

          .title('Preview'),
      ]);

    default:
      return S.document().views([S.view.form()]);
  }
};

kanskje en annen bedre løsning for mitt tilfelle?