Red Max•2y ago

All vanilla client queries fail with 500. Setup problem?

I'm using NextJS but using the vanilla client to integrate trpc calls into my custom hooks. But, even when using the NextJS queries, they also fail with a 500. I am completely stuck with my project until I can get this resolved. Any help is greatly appreciated. The call requires no input so I have tried it two different ways. When the router's .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 router's .input is z.null() the request URL is /api/trpc/generateRandomWorker?batch=1&input={"0":{"json":null}} and returns a 500. Here is the hook I am using with vanilla client queries and the router setup.

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 };

}

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 };

}

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)),
});

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)),
});

3 Replies

Red MaxOP•2y ago

More setup info in my StackOverflow question: https://stackoverflow.com/questions/75227309/all-my-trpc-queries-fail-with-a-500-what-is-wrong-with-my-setup?noredirect=1#comment132748175_75227309

Stack Overflow

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

Nick•2y ago

What does your server's console output say? 500 error will usually mean your own code is failing, WorkerService that is Also what's the actual response in the network debugger? tRPC typically sends back a lot of info

Red MaxOP•2y ago

My console is giving me TypeError: resolver is not a function and only occurs when I press the button for adding a random worker (code in the SO link). The network response is not giving me anything useful. The stream is locked and otherwise just gives me a 500 and the URL. Answered. Turns out I was missing the export for the API handler in api/trpc/[trpc].ts

All vanilla client queries fail with 500. Setup problem?

Did you find this page helpful?