不熟悉trpc。尝试获取基本的查询功能，但不起作用。不知道我错过了什么。在v9中它使用createReactQueryHooks()，但在v10中似乎只需要使用createTRPCNext()，如果我在util/trpc.tsx中没有搞错的话。

错误：

next-dev.js:32 Error: Query data cannot be undefined - affected query key: ["greeting"]
    at Object.onSuccess (query.mjs:320:19)
    at resolve (retryer.mjs:64:50)

// utils/trpc.ts
export const trpc = createTRPCNext<AppRouter, SSRContext>({
    config({ ctx }) {
        return {
            transformer: superjson, // optional - adds superjson serialization
            links: [
                httpBatchLink({
                    /**
                     * If you want to use SSR, you need to use the server's full URL
                     * @link https://trpc.io/docs/ssr
                   **/
                    url: `${getBaseUrl()}/api/trpc`,
                }),
            ],
            /**
             * @link https://react-query-v3.tanstack.com/reference/QueryClient
           **/
            // queryClientConfig: { defaultOptions: { queries: { staleTime: 60 } } },
            headers() {
                if (ctx?.req) {
                    // To use SSR properly, you need to forward the client's headers to the server
                    // This is so you can pass through things like cookies when we're server-side rendering
                    // If you're using Node 18, omit the "connection" header
                    const {
                        // eslint-disable-next-line @typescript-eslint/no-unused-vars
                        connection: _connection,
                        ...headers
                    } = ctx.req.headers;
                    return {
                        ...headers,
                        // Optional: inform server that it's an SSR request
                        "x-ssr": "1",
                    };
                }
                return {};
            },
        };
    },
    ssr: true,
});

// server/router/_app.ts
import { t } from '@/server/trpc';
import { userRouter } from '@/server/router/user';
import { postRouter } from '@/server/router/posts';
import { authRouter } from './authy';

export const appRouter = t.router({
    user: userRouter,
    post: postRouter,
    authy: authRouter,
    greeting: t.procedure.query(() => 'hello tRPC v10!'),
});

export type AppRouter = typeof appRouter;

// server/router/authy.ts
import { t } from "@/server/trpc";
import * as trpc from "@trpc/server";
import { z } from "zod";

export const authRouter = t.router({
    hello: t.procedure
        // using zod schema to validate and infer input values
        .input(
            z.object({
                    text: z.string().nullish(),
                })
                .nullish().optional()
        )
        .query(({ input }) => {
            return {
                greeting: `hello ${input?.text ?? "world"}`,
            };
        }),
});

export type AuthRouter = typeof authRouter;

所有的路线都不起作用。它们都显示出类似的错误。

// pages/test.tsx
import React from "react";
import { NextPage } from "next";
import { trpc } from "@/utils/trpc";

const TestPage: NextPage = () => {
    const helloNoArgs = trpc.authy.hello.useQuery();
    const helloWithArgs = trpc.authy.hello.useQuery({ text: "client" });
    const greeting = trpc.greeting.useQuery();

    return (
        <div>
            <h1>Hello World Example</h1>
            <ul>
                <li>
                    helloNoArgs ({helloNoArgs.status}):{" "}
                    <pre>{JSON.stringify(helloNoArgs.data, null, 2)}</pre>
                </li>
                <li>
                    helloWithArgs ({helloWithArgs.status}):{" "}
                    <pre>{JSON.stringify(helloWithArgs.data, null, 2)}</pre>
                </li>
                <li>
                    greeting ({greeting.status}):{" "}
                    <pre>{JSON.stringify(greeting.data, null, 2)}</pre>
                </li>
            </ul>
        </div>
    );
};

export default TestPage;