Liltripple_reid•15mo 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>();

6 Replies

Liltripple_reidOP•15mo 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•15mo ago

Same error for me

Liltripple_reidOP•15mo 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•15mo 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_reidOP•15mo 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•15mo 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.