2023-01-27

All my TRPC queries fail with a 500. What is wrong with my setup?

I am new to TRPC and have set up a custom hook in my NextJS app to make queries. This hook is sending out a query to generateRandomWorker but the response always returns a generic 500 error. I am completely stuck until I can figure out this issue.

The hook:

// filepath: src\utilities\hooks\useCreateRandomWorker.ts

type ReturnType = {
    createWorker: () => Promise<Worker>,
    isCreating: boolean,
}

const useCreateRandomWorker = (): ReturnType => {

    const [isCreating, setIsCreating] = useState(false);

    const createWorker = async (): Promise<Worker> => {

        setIsCreating(true);

        const randomWorker: CreateWorker = await client.generateRandomWorker.query(null);

        const createdWorker: Worker = await client.createWorker.mutate(randomWorker);

        setIsCreating(false);

        return createdWorker;
    }

    return { createWorker, isCreating };

Here is the router. I know the WorkerService calls work because they are returning the proper values when passed into getServerSideProps which directly calls them. WorkerService.generateRandomWorker is synchronous, the others are async.

// filepath: src\server\routers\WorkerAPI.ts

export const WorkerRouter = router({
  generateRandomWorker: procedure
        .input(z.null()) // <---- I have tried completely omitting `.input` and with a `null` property
        .output(PrismaWorkerCreateInputSchema)
        .query(() => WorkerService.generateRandomWorker()),
  getAllWorkers: procedure
        .input(z.null())
        .output(z.array(WorkerSchema))
        .query(async () => await WorkerService.getAllWorkers()),
  createWorker: procedure
        .input(PrismaWorkerCreateInputSchema)
        .output(WorkerSchema)
        .mutation(async ({ input }) => await WorkerService.createWorker(input)),
});

The Next API listener is at filepath: src\pages\api\trpc\[trpc].ts

When the .input is omitted the request URL is /api/trpc/generateRandomWorker?batch=1&input={"0":{"json":null,"meta":{"values":["undefined"]}}} and returns a 500.

When the .input is z.null() the request URL is /api/trpc/generateRandomWorker?batch=1&input={"0":{"json":null}} and returns a 500.

Can anyone help on what I might be missing?

Additional Info

The client declaration.

// filepath: src\utilities\trpc.ts

export const client = createTRPCProxyClient<AppRouter>({
    links: [
        httpBatchLink({
            url: `${getBaseUrl() + trpcUrl}`, // "http://localhost:3000/api/trpc"
            fetch: async (input, init?) => {
                const fetch = getFetch();
                return fetch(input, {
                    ...init,
                    credentials: "include",
                })
            }
        }),
    ],
    transformer: SuperJSON,
});

The init:

// filepath: src\server\trpc.ts

import SuperJSON from "superjson";
import { initTRPC } from "@trpc/server";

export const t = initTRPC.create({
    transformer: SuperJSON,
});

export const { router, middleware, procedure, mergeRouters } = t;


No comments:

Post a Comment