TypeError: Cannot read properties of null (reading 'useContext') when using useMutation with TRPC in
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.
3 Replies
Have you set up your Provider (or for next: "withTRPC") correctly?
Set up with Next.js | tRPC
Recommended file structure
Also ensure that the component calling the hooks is beneath that in the hierarchy, this very much looks a case on not being able to get the Context for React Query or tRPC