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.
N
Nick•324d ago
Have you set up your Provider (or for next: "withTRPC") correctly?
N
Nick•324d ago
Set up with Next.js | tRPC
Recommended file structure
N
Nick•324d ago
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
4.8KMembers
View on DiscordMore Posts
Initial websockets getToken() returns null: next-auth + websockets :)Hello!
So the way I am trying to authenticate websockets is like this:
```
import { getToken } froCan I get the original type name, instead of the shape, with query?I'm not sure how to explain it, so, here's a screen shot:TRPCClientError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON ErrorHello folks, I'm getting an issue with my integration, I'm a newbie in tRPC and I can't work well mytrpc corsmy sveltekit app is running on https://example.com with tRPC and it's making requests to http://127.T3 app tRPC external callsCurrently i'm just making Post request and formatting my payload to
```{
"0": {
"json":Next-auth session not being fetched in tRPC contextNext-auth session not being fetched in tRPC contextuseMutation not handeling arguments correctly.Hello, I have a mutation setup on the server with the input being an object containing the fields emUpdate Clerk Organization from TRPC Router (T3 Stack)Hello, if anyone got an idea on how to handle this I would highly appreciate it.
I have some organi