我所有的 TRPC 查詢都失敗並返回 500。我的設置有什么問題？

Question

我是 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時返回正確的值。 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

當省略 the.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;

Answer 1

對不起，我不熟悉香草客戶端。 但是由於您正在做出反應，您可能對某些方式感興趣，您可以在使用反應客戶端時從任何地方調用 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})
    }

Answer 2

回答。

原來我在api/trpc/[trpc].ts中缺少 API 處理程序的導出