TypeError: Cannot read properties of null (reading 'useContext') when using useMutation with TRPC

Question

I'm encountering an error in my Next.js application when trying to use the useMutation hook with TRPC (Typed RPC) library. The error message I'm getting is TypeError: Cannot read properties of null (reading 'useContext'). It seems to be related to the useContext hook, but I'm not sure how to resolve it.

Here's the relevant code snippet within a Next.js component, including the TRPC setup:

/// trpc router
import { api } from "~/utils/api";
import { createTRPCRouter, publicProcedure } from "~/server/api/trpc";
import { input, z } from "zod";

export const signUpRouter = createTRPCRouter({
  register: publicProcedure
    .input(z.object({ email: z.string().email(), password: z.string().min(8) }))
    .mutation(async ({ input }) => {
      try {
        // Code inside the mutation
      } catch (error) {
        console.log(error);
        return "An error occurred while processing the request.";
      }
    }),
});

/// this signup form

const mutation = api.user.register.useMutation();

const handleSignUp = (values: { email: string; password: string }) => {
  mutation.mutate({
    email: values.email,
    password: values.password,
  });
};

export const SignUpForm = () => {
  // ...
};

I have checked the imports, dependencies, and the usage of the useMutation hook. However, I'm still encountering this error. I suspect it might be related to the interaction between the TRPC library and Next.js or the way I'm using the useMutation hook with TRPC.

Has anyone encountered a similar issue when using TRPC with Next.js? Any suggestions on what might be causing this error and how I can resolve it would be greatly appreciated.

Answer 1

dampy,i did not notice that the context():const mutation = api.user.register.useMutation(); should be inside the component. ;)