0

Using the T3 stack (Nextjs pages router + TRPC + prisma), I am trying to perform certain actions on the server via getStaticProps.

I have two dynamic routes: /[householdId]/shopping-list/[id].tsx

In [id].tsx's getStaticProps I am accessing both dynamic values in order to prefetch data via TRPC.

However, householdId becomes undefined for some reason in the TRPC route, even though it has a value while still in getStaticProps. The id value works.

[id].tsx getStaticProps part:

export const getStaticProps: GetStaticProps = async (context) => {
  const id = context.params?.id
  const householdId = context.params?.householdId

  const ssg = createProxySSGHelpers({
    router: appRouter,
    ctx: {
      userId: null,
      userOrgs: null,
      prisma,
    },
    transformer: superjson,
  })

  if (id && householdId) {
    // throw new Error(`id value: ${id}, householdId value: ${householdId}`) // this obviously is only for testing, but it shows that householdId has a value
    await ssg.shoppingLists.getById.prefetch({ id, householdId })
  }
  return {
    props: {
      trpcState: ssg.dehydrate(),
      id,
      householdId,
    },
  }
}

TRPC route for retrieving data from prisma

export const shoppingLists = createTRPCRouter({
  getById: publicProcedure
    .input(
      z.object({
        id: z.string(),
        householdId: z.any() // it will crash unless it's any, since householdId arrives undefined
      })
    )
    .query(async (opts) => {
      const id = opts.input.id
      const householdId = opts.input.householdId
      console.log("id - ", id)
      console.log("household - ", householdId) // undefined

      // logic to check if the authed user is a member of the household / organization
      const userOrganizations = Object.keys(opts.ctx.userOrgs)
      const isUserPartOfHousehold = userOrganizations.includes(householdId)

      if (!isUserPartOfHousehold) {
        throw new TRPCError({
          code: "UNAUTHORIZED",
          cause: "User not part of organization.",
        })
      }
      const list = await prisma.shoppingList.findUnique({
        where: {
          id: opts.input.id,
        },
        include: {
          items: true,
        },
      })

      if (!list) throw new TRPCError({ code: "NOT_FOUND" })

      return list
    }),
  create: privateProcedure
    .input(
      z.object({
        name: z.string().min(1).max(280),
        householdId: z.string(),
      })
    )
    .mutation(async ({ ctx, input }) => {
      const createdById = ctx.userId
      const list = await ctx.prisma.shoppingList.create({
        data: {
          createdById,
          name: input.name,
          householdId: input.householdId,
        },
      })
      return list
    }),
})

proving that householdId has a value in [id].tsx's getStaticProps: enter image description here

I am really confused by the above, since it seems that everything is provided.

bysiuxvx
  • 65
  • 2
  • 10

0 Answers0