👋 Next.js Conf 2024: Come build, party, run, and connect with us! See all events

Hi, I need help with Iframe preview, I have a `route` schema with unique `slug` (`/lb/123`) and also I have `page` schema with the content for that route now the problemis...

9 replies
Last updated: Dec 21, 2020
Hi, I need help with Iframe preview, I have a
route
schema with unique
slug
(
/lb/123
) and also I have
page
schema with the content for that route now the problem is how do I add the
slug
property to the
page
schema so the preview can work ? been stuck on this from hours 😪
Dec 21, 2020, 8:15 PM
So you want to get the
route
that a page is connected to, and show the preview for that route, right?
Dec 21, 2020, 8:25 PM
Exactly, I have the page referenced in the route schema.
{
      name: 'page',
      type: 'reference',
      validation: (Rule) => Rule.required(),
      description: 'The page you want to appear at this path. Remember it needs to be published.',
      to: [
        {
          type: 'page'
        }
      ]
    },
I just need to access the
slug
for this route on the connected page!
Dec 21, 2020, 8:27 PM
let me just test a thing real quick
Dec 21, 2020, 8:31 PM
Check if something like this work:
 S.documentList()
              .title('Active pages')
              .id('pages')
              .schemaType('page')
              .menuItems(S.documentTypeList('page').getMenuItems())
              .filter('_type == "page" && _id in *[_type == "route"].page._ref')
              .child(async documentId => {
                const slug = await client.fetch(
                  `*[_type == "route" && page._ref == $documentId][0].slug.current`,
                  { documentId }
                )
                return S.document()
                  .documentId(documentId)
                  .schemaType('page')
                  .views([
                    S.view.form(),
                    S.view.component(PagePreview).title('preview'.options({ slug })
                  ])
              })
          ),

Dec 21, 2020, 8:36 PM
import client from 'part:@sanity/base/client
in the top of the file
Dec 21, 2020, 8:37 PM
you can of course do this datafetching in the preview component too, might even be better actually
Dec 21, 2020, 8:37 PM
Thank you, I'm getting
id
is required for view item
error
Dec 21, 2020, 8:50 PM
yeah, i forgot to add a
.title('Preview')
 to the component
Dec 21, 2020, 8:50 PM
Oh yes! Thank you so much for your time! It works! 🎉
Dec 21, 2020, 8:55 PM

Sanity– build remarkable experiences at scale

Sanity is a modern headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Was this answer helpful?