Liltripple_reid
Liltripple_reid14mo ago

useMutation throwing 500 errors

I've setup my next 13 app router project and started using some queries that worked fine, however the only route I have for mutations fails without any detailed error. I'm using the createTRPCReact with a custom client for RSC.
"use client";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { httpBatchLink } from "@trpc/client";
import { useState, type ReactNode } from "react";
import superjson from "superjson";
import { apiRSC } from "~/utils/api";

/**
*
* @description should be updated when trpc releases an RSC and Edge compatible version
*
*/
export const TRPCProvider = ({ children }: { children: ReactNode }) => {
const [queryClient] = useState(() => new QueryClient());
const [trpcClient] = useState(() =>
apiRSC.createClient({
links: [
httpBatchLink({
url: "http://localhost:3000/api/trpc",
}),
],
transformer: superjson,
})
);

return (
<apiRSC.Provider client={trpcClient} queryClient={queryClient}>
<QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
</apiRSC.Provider>
);
};
"use client";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { httpBatchLink } from "@trpc/client";
import { useState, type ReactNode } from "react";
import superjson from "superjson";
import { apiRSC } from "~/utils/api";

/**
*
* @description should be updated when trpc releases an RSC and Edge compatible version
*
*/
export const TRPCProvider = ({ children }: { children: ReactNode }) => {
const [queryClient] = useState(() => new QueryClient());
const [trpcClient] = useState(() =>
apiRSC.createClient({
links: [
httpBatchLink({
url: "http://localhost:3000/api/trpc",
}),
],
transformer: superjson,
})
);

return (
<apiRSC.Provider client={trpcClient} queryClient={queryClient}>
<QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
</apiRSC.Provider>
);
};
my trpc-client creator
export const apiRSC = createTRPCReact<AppRouter>();
export const apiRSC = createTRPCReact<AppRouter>();
No description
No description
6 Replies
Liltripple_reid
Liltripple_reid14mo ago
traced back the error down to httpUtils as shown in the first screenshot full error thrown from
useMutation({
onError: ...
})
useMutation({
onError: ...
})
TRPCClientError: Unexpected end of JSON input
at TRPCClientError.from (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/@trpc+client@10.38.1_@trpc+server@10.38.1/node_modules/@trpc/client/dist/TRPCClientError-fef6cf44.mjs:30:16)
at eval (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/@trpc+client@10.38.1_@trpc+server@10.38.1/node_modules/@trpc/client/dist/httpUtils-ad76b802.mjs:136:81)
TRPCClientError: Unexpected end of JSON input
at TRPCClientError.from (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/@trpc+client@10.38.1_@trpc+server@10.38.1/node_modules/@trpc/client/dist/TRPCClientError-fef6cf44.mjs:30:16)
at eval (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/@trpc+client@10.38.1_@trpc+server@10.38.1/node_modules/@trpc/client/dist/httpUtils-ad76b802.mjs:136:81)
juico
juico14mo ago
Same error for me
Liltripple_reid
Liltripple_reid14mo ago
totally blocked by this tbh okay after digging more into this I think I found the issue, probably the return data of the router mutation isn't being sent as Response, just tried it on a standalone api route handler and this works: so a) it's not my db, b) probably the adapter used is not parsing the responses?
export const POST = async (req: Request) => {
const body = (await req.json()) as unknown;
const parsed = userPickedSchema.safeParse(body);

const session = await getServerSession(authOptions);

if (!session?.user) {
return new TRPCError({
code: "UNAUTHORIZED",
message: "Unauthorized",
});
}

if (!parsed.success) {
return new TRPCError({
code: "BAD_REQUEST",
message: "Invalid body",
});
}

const { user } = session;

const data = await db.update(users).set(parsed.data).where(eq(users.id, user.id));

console.log({ data, parsed, body });

return new Response(JSON.stringify(data), {
status: 200,
headers: {
"Content-Type": "application/json",
},
});
};
export const POST = async (req: Request) => {
const body = (await req.json()) as unknown;
const parsed = userPickedSchema.safeParse(body);

const session = await getServerSession(authOptions);

if (!session?.user) {
return new TRPCError({
code: "UNAUTHORIZED",
message: "Unauthorized",
});
}

if (!parsed.success) {
return new TRPCError({
code: "BAD_REQUEST",
message: "Invalid body",
});
}

const { user } = session;

const data = await db.update(users).set(parsed.data).where(eq(users.id, user.id));

console.log({ data, parsed, body });

return new Response(JSON.stringify(data), {
status: 200,
headers: {
"Content-Type": "application/json",
},
});
};
juico
juico14mo ago
Hmm, still having the same error :/ But now I'm having it on GET() as well: Error: Attempted to call GET() from the server but GET is on the client. It's not possible to invoke a client function from the server, it can only be rendered as a Component or passed to props of a Client Component.
Liltripple_reid
Liltripple_reid14mo ago
wait that's weird are you using app/api/<your_route_name>/route.ts or with trpc app/api/trpc/[trpc]/route.ts?
juico
juico14mo ago
The second one: app/api/trpc/[trpc]/route.ts? It's resolved, for some reason I was having "use client" at the top of my file. For the life of me I have no idea why I had it there.