tRPC "Cannot destructure property 'client' of 'useContext(...)' as it is null"

i'm using create-t3-app. i'm trying to call my trpc endpoint from my frontend and i get

TypeError: Cannot destructure property 'client' of 'useContext(...)' as it is null.

TypeError: Cannot destructure property 'client' of 'useContext(...)' as it is null.

i'm calling this in a client component in /pages so it's not an app directory not supporting context issue backend code

export const getProjects = publicProcedure
  .input(z.object({ publicKey: z.string() }))
  .mutation(async ({ input, ctx: { prisma } }) => {
    const projects = await prisma.project.findMany({
      where: {
        client: {
          public_key: input.publicKey,
        },
      },
      select: {
        name: true,
      },
    });

    return projects;
  });

export const getProjects = publicProcedure
  .input(z.object({ publicKey: z.string() }))
  .mutation(async ({ input, ctx: { prisma } }) => {
    const projects = await prisma.project.findMany({
      where: {
        client: {
          public_key: input.publicKey,
        },
      },
      select: {
        name: true,
      },
    });

    return projects;
  });

frontend code

const { mutate } = api.client.getProjects.useMutation();

const { mutate } = api.client.getProjects.useMutation();

2 Replies

esponges•2y ago

same problem, in a component declared with the use client directive, did you solve it? queries get the following error Cannot destructure property 'abortOnUnmount' of 'useContext(...)' as it is null.

oaOP•2y ago

yeah, make sure you have the context added in _app.js

Gaming

Programming

tRPC "Cannot destructure property 'client' of 'useContext(...)' as it is null"