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.io: Get the most out of your content

Sanity.io is a platform to build websites and applications. It comes with great APIs that let you treat content like data. Give your team exactly what they need to edit and publish their content with the customizable Sanity Studio. Get real-time collaboration out of the box. Sanity.io comes with a hosted datastore for JSON documents, query languages like GROQ and GraphQL, CDNs, on-demand asset transformations, presentation agnostic rich text, plugins, and much more.

Don't compromise on developer experience. Join thousands of developers and trusted companies and power your content with Sanity.io. Free to get started, pay-as-you-go on all plans.