Multiple custom type at the same level [uid.ts]

Developing with Prismic
1

Hello,

I am having a hard time fetch the different custom_types which should be nested at the same level.
In other words, all 5 custom_types will be nested after the subfolder "/jobs/custom_type":
jobs/title
jobs/city
jobs/xyz
...
Is there a more DRY & neat way to set up such a configuration?

Here's what I have failing so far in pages > jobs > [uid.tsx]

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

  let page = null

  for (const type of [
    'pillar_page',
    'job_category',
    'city',
    'country',
    'job_title'
  ]) {
    try {
      page = await client.getByUID(
        type as
          | 'pillar_page'
          | 'job_category'
          | 'job_title'
          | 'city'
          | 'country',
        params.uid
      )
      if (page) {
        break
      }
    } catch (error) {
      // do nothing
    }
  }

  const similarPages = await getSimilarPages({ client, page })

  const 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,
      upperTitle: page.data?.upper_title,
      title: page.data?.title,
      description: page.data?.description,
      keyword: page.data?.keyword,
      url: page.url,
      slices,
      similarPages
    }
  }
}

export async function getStaticPaths() {
  const client = createClient()

  const pillarPages = await client.getAllByType('pillar_page')
  const jobCategoryPages = await client.getAllByType('job_category')
  const jobTitlePages = await client.getAllByType('job_title')
  const cityPages = await client.getAllByType('city')
  const countryPages = await client.getAllByType('country')

  const paths = [
    ...pillarPages,
    ...jobCategoryPages,
    ...jobTitlePages,
    ...cityPages,
    ...countryPages
  ].map((page) => prismicH.asLink(page))

  return {
    paths,
    fallback: false
  }
}
3

When we decide on the site structure, we maintain the category/group as the parent of the child page. For example:
If I have jobs as the category, the structure could be jobs/uid
If I have the city as the group, the structure could be city/uid
and so on.
That differentiates the exact category with respect to the custom types.

The best possible way will be to add the category above the uid.

However, alternate ways exist, such as using a dot with the UID to differentiate the category.
For example:
If the structure has /jobs/newyork.city as the page. You need to check the value of uid in /jobs/uid to see the category after the dot value in the front end.

I hope that answers your questions, and let me know if you have any further questions.

Thanks,
Priyanka

5

Hello @Priyanka

Thank you for your feedback.

We have followed your piece of advice such as job.city, in our case: boston.data-analyst
That actually solve this ticket: Duplicate This value is already used by another job_localization document (URL build with content relationship)

Although, we really wanted to avoid having various subfolders for our different custom types, so we have to make multiple custom type requests in the same jobs > [uid].ts file:

I guess it's not prismic-friendly, but product wise we need it to be nested such as jobs/uid_of_custom_type_1, jobs/uid_of_custom_type_2, etc.


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

  let page = null

  for (const type of [
    'pillar_page',
    'job_category',
    'city',
    'country',
    'job_title'
  ]) {
    try {
      page = await client.getByUID(
        type as
          | 'pillar_page'
          | 'job_category'
          | 'job_title'
          | 'city'
          | 'country',
        params.uid
      )
      if (page) {
        break
      }
    } catch (error) {}
  }

  const similarPages = await getSimilarPages({ client, page })

  const 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,
      upperTitle: page.data?.upper_title,
      title: page.data?.title,
      description: page.data?.description,
      keyword: page.data?.keyword,
      url: page.url,
      slices,
      similarPages
    }
  }
}

export async function getStaticPaths() {
  const client = createClient()

  const pillarPages = await client.getAllByType('pillar_page')
  const jobCategoryPages = await client.getAllByType('job_category')
  const jobTitlePages = await client.getAllByType('job_title')
  const cityPages = await client.getAllByType('city')
  const countryPages = await client.getAllByType('country')

  const paths = [
    ...pillarPages,
    ...jobCategoryPages,
    ...jobTitlePages,
    ...cityPages,
    ...countryPages
  ].map((page) => prismicH.asLink(page))

  return {
    paths,
    fallback: false
  }
}
1 Like