How to fix error about getting id params in router when ssr is true

I want to make this page SSR for better SEO so currently i use like this

export const getServerSideProps: GetServerSideProps = async context => {
  return {
    props: {
      id: context.params?.id,
    },
  }
}

const CategoryInfomation: NextPageWithLayout<{
  id: string
}> = props => {
  const { data, isLoading } = trpc.public.category.getCategory.useQuery({
    id: props.id,
  })

  return (
    <>
      <Head>
        <title>Category Infomation</title>
        <meta name="description" content="Generated by create-t3-app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <Container py={8} experimental_spaceY={6}>
        {isLoading && <LoadingBox />}
        {!isLoading && data && (
          <>
            <PageTitle
              title={data?.name || ''}
              subtitle="Category Infomation"
            />
            <AspectRatio ratio={16 / 4}>
              <Image src={data?.image} alt={data?.name} rounded="2xl" />
            </AspectRatio>
          </>
        )}
        <Grid templateColumns="repeat(5, 1fr)" gap={2}>
          {data?.products?.map(product => (
            <ProductItem {...product} key={product.id} isHideCategory />
          ))}
        </Grid>
      </Container>
    </>
  )
}

export const getServerSideProps: GetServerSideProps = async context => {
  return {
    props: {
      id: context.params?.id,
    },
  }
}

const CategoryInfomation: NextPageWithLayout<{
  id: string
}> = props => {
  const { data, isLoading } = trpc.public.category.getCategory.useQuery({
    id: props.id,
  })

  return (
    <>
      <Head>
        <title>Category Infomation</title>
        <meta name="description" content="Generated by create-t3-app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <Container py={8} experimental_spaceY={6}>
        {isLoading && <LoadingBox />}
        {!isLoading && data && (
          <>
            <PageTitle
              title={data?.name || ''}
              subtitle="Category Infomation"
            />
            <AspectRatio ratio={16 / 4}>
              <Image src={data?.image} alt={data?.name} rounded="2xl" />
            </AspectRatio>
          </>
        )}
        <Grid templateColumns="repeat(5, 1fr)" gap={2}>
          {data?.products?.map(product => (
            <ProductItem {...product} key={product.id} isHideCategory />
          ))}
        </Grid>
      </Container>
    </>
  )
}

In CSR it worked but I want to make it ssr so i turn my trpc config about ssr to true and i got error like this

TRPCClientError: [
  {
    "code": "invalid_type",
    "expected": "string",
    "received": "undefined",
    "path": [
      "id"
    ],
    "message": "Required"
  }
]

TRPCClientError: [
  {
    "code": "invalid_type",
    "expected": "string",
    "received": "undefined",
    "path": [
      "id"
    ],
    "message": "Required"
  }
]

I think it's like TRPC doesn't found params data from router so how to fix this to make trpc found about router params <a:chino_spineye:407188935048167434>

0 Replies

No replies yetBe the first to reply to this messageJoin

Gaming

Programming

How to fix error about getting id params in router when ssr is true