Modelling re-usable page/slice with content relationship & next js

Developing with Prismic
11

Of course :slight_smile:

export async function getStaticProps({ params, previewData }) {
  const client = createClient({ previewData })


  const page = await client.getByUID('pillar_page', params.uid)
  const similarPages = await getSimilarPages({ client, page })

// The magic is operating here:
  page.data.slices = await Promise.all(
    page.data.slices.map(async (slice) => {
      if (
        slice.slice_type === 'reusable_topic_info' &&
        slice.primary.reusabletopic.id
      ) {
        const topic = await client.getByID(slice.primary.reusabletopic.id)
        slice.primary.reusabletopic = topic
        return slice
      }

      return slice
    })
  )

  return {
    props: {
      metaTitle: page.data.meta_title,
      metaDescription: page.data.meta_description,
      ogImage: page.data.og_image.url,
      page: page,
      similarPages,
      title: page.data.title,
      upperTitle: page.data.uppertitle
    }
  }
}

Shoutout to Angelo Ashmore, a Prismic contributor who unblocked me on that on!!
Basically the idea is of the snippet code above (FAQ document = topic info):

  1. Add a field to your Page CT that lets you select your FAQ document.
  2. In your page’s getStaticProps, you would query first query for your page’s document. Then, you would make another query for your FAQ document using the page’s content relationship’s ID property.
  3. Return the FAQ document in your props and use it in your page.
2 Likes