0

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.

Mohammad Masood Alam
  • 403
  • 5
  • 14
ziyaDev
  • 21
  • 5

1 Answers1

0

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

ziyaDev
  • 21
  • 5