我是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;
2条答案
按热度按时间g52tjvyc1#
抱歉,我对vanilla客户端不熟悉,但是既然你使用react,你可能会对一些方法感兴趣,你可以在使用react客户端的时候从任何地方调用一个trpc过程:
通过使用上下文,你几乎可以在任何地方做任何事情:
对于已知查询,可以在声明时禁用它,然后根据需要重新获取它
如果您的过程是一个变种,那么它是微不足道的,因此您可以将GET转换为POST
wsxa1bj12#
回答。
原来我在
api/trpc/[trpc].ts
中缺少API处理程序的导出