reactjs 我所有的TRPC查询都失败了,结果是500,我的设置出了什么问题?

6ioyuze2  于 2023-01-30  发布在  React
关注(0)|答案(2)|浏览(101)

我是TRPC的新手,在NextJS应用中设置了一个自定义钩子来进行查询。这个钩子向generateRandomWorker发送查询,但响应总是返回一个通用的500错误。我完全被卡住了,直到我能解决这个问题。
钩子:

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

这是路由器。我知道WorkerService调用可以工作,因为它们在传递到getServerSideProps时返回正确的值,getServerSideProps直接调用它们。WorkerService.generateRandomWorker是同步的,其他的是异步的。

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

下一个API侦听器位于filepath: src\pages\api\trpc\[trpc].ts
如果省略. input,则请求URL为/api/trpc/generateRandomWorker?batch=1&input={"0":{"json":null,"meta":{"values":["undefined"]}}},并返回500。
当. input为z.null()时,请求URL为/api/trpc/generateRandomWorker?batch=1&input={"0":{"json":null}}并返回500。
有谁能帮我解释一下我可能错过了什么吗?

    • 附加信息**

客户端声明。

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

姓名首字母缩写:

// 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;
g52tjvyc

g52tjvyc1#

抱歉,我对vanilla客户端不熟悉,但是既然你使用react,你可能会对一些方法感兴趣,你可以在使用react客户端的时候从任何地方调用一个trpc过程:
通过使用上下文,你几乎可以在任何地方做任何事情:

const client = trpc.useContext()
    const onClick = async () => {
        const data = await client.playlist.get.fetch({id})
    }

对于已知查询,可以在声明时禁用它,然后根据需要重新获取它

const {refetch} = trpc.playlist.get.useQuery({id}, {enabled: false})
    const onClick = async () => {
        const data = await refetch()
    }

如果您的过程是一个变种,那么它是微不足道的,因此您可以将GET转换为POST

const {mutateAsync: getMore} = trpc.playlist.more.useMutation()
    const onClick = async () => {
        const data = await getMore({id})
    }
wsxa1bj1

wsxa1bj12#

回答。
原来我在api/trpc/[trpc].ts中缺少API处理程序的导出

相关问题