Repeated Custom Type not showing by uid

[jprzpam (Juan Perez)]

I'm trying to show a specific custom type by uid but it does not seem to be working.

This is how page that will show each custom type looks

// pages/cursos/[uid].js


const Page = (props) => <SliceZone {...props} resolver={resolver} />

export const getStaticProps = useGetStaticProps({
  client: Client(),
  type: 'curso',
  apiParams({ params }) {
    // params are passed by getStaticPaths
    return {
      uid: params.uid,
    }
  },
})

export async function getStaticPaths() {
  const allCursos = await getAllCoursesWithSlug()
  return {
    paths: allCursos?.map(({ node }) => `/cursos/${node._meta.uid}`) || [],
    fallback: true,
  }
}
export default Page

and inside my prismic-configuration.js

export const linkResolver = (doc) => {
  if (doc) {
    if (doc.type === 'curso') {
      return `cursos/${doc.uid}`
    }
  }
  return '/'
}


export const Router = {
  routes: [
    { type: 'curso', path: '/cursos/:uid' },
    {
      type: 'home-page',
      path: '/',
    },
    },
  ],
  href: (type) => {
    const route = Router.routes.find((r) => r.type === type)
    return route && route.href
  },
}

this code currently shows and empty page with no error. would like to know what I'm missing. Thank you!

[jprzpam (Juan Perez)]

I changed getStaticProps to be like this:

export const getStaticProps = async ({ params }) => {
  // Same useGetStaticProps call
  const curso = await Client().getByUID('curso', params.uid)

  return { props: { curso: curso.props } }
}

which seems to query the document as expected but I now get this server error:

Server Error

Error: Error serializing `.curso` returned from `getStaticProps` in "/cursos/[uid]".
Reason: `undefined` cannot be serialized as JSON. Please use `null` or omit this value.
This error happened while generating the page. Any console logs will be displayed in the terminal window.

[Phil (Phil Snow)]

Hi Juan,

I'm not sure what was going on in your the first example you sent, but it the second example I think you need to change your SliceZone component...

@jprzpam

<SliceZone {...props} resolver={resolver} />

To look like this:

<SliceZone resolver={resolver} slices={slices} />

and change...

return { props: { curso: curso.props } }

to look like this:

  return {
    props: {
      slices: curso.data.body
    }
  }

Let me know if this helps or if you need me to explain any of this.

Thanks.

[jprzpam (Juan Perez)]

Hi @Phil! Thank you for your response. I did the changes you suggested but curso.data.body seems to be undefined so when passing it as props I get the following error:

Error: Error serializing `.slices` returned from `getStaticProps` in "/cursos/[uid]".
Reason: `undefined` cannot be serialized as JSON. Please use `null` or omit this value.

This is the result I get when I do curso.data

{
  title: [ { type: 'heading3', text: 'Matemáticas', spans: [] } ],
  description: [
    {
      type: 'paragraph',
      text: 'Editado 21 Sept. A lacus vestibulum sed arcu non odio euismod lacinia at. Id volutpat lacus laoreet non curabitur gravida. Tempus quam pellentesque nec nam aliquam sem et tortor. ',
      spans: []
    }
  ],
  level: 'Primaria',
  grade: 'primero',
  slices: [
    {
      slice_type: 'course_header_slice',
      slice_label: null,
      version: 'sktwi1xtmkfgx8626',
      variation: 'default-slice',
      primary: [Object],
      items: [Array]
    }
  ]
}

Passing only curso.data gives me this error

Your SliceZone is empty.

Go to your writing room and start creating content to see it appear here!

Any ideas on why this might be? Thanks in advance.

on this same note, I'm also not able to see body property with a graphQL query

[Phil (Phil Snow)]

My bad, I forgot that this field has changed with newer releases, in that case return your props as so:

  return {
    props: {
      slices: curso.data.slices
    }
  }

[jprzpam (Juan Perez)]

Hi! sorry I also forgot to say that I did try to pass the props that way but get a blank page.

I do see this when I inspect the page:

so looks like the props are passed correctly but somehow I can't see the slices. Any idea why? Thanks!

[jprzpam (Juan Perez)]

Scratch that! the problem was that I was using a Rich Text render component for a Key Text, it seems to be working all right now. Thanks!

[Phil (Phil Snow)]

Glad you figured it out