trpc v10 -错误:查询数据不能被定义。

Question

对trpc来说是新的。试图获得基本的查询功能，但它不起作用。不知道我错过了什么。在v9中，它使用了createReactQueryHooks()，但是在v10中，如果我在util/trpc.tsx中没有弄错的话，您只需要使用createTRPCNext()。

错误：

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;

Answer 1

奥姆戈什..。这是因为我使用的是"^10.0.0-proxy-beta.7“而不是"^10.0.0-proxy-beta.8”。

编辑:不知何故，我又犯了一个错误，22天后又遇到了自己的问题，然后又解决了。一般来说，当使用trpc时，对所有@next包进行更新似乎是最好的，因为当包改进时，让包之间不相互交谈似乎有点容易。

https://trpc.io/docs/v10/quickstart#installation-snippets

Answer 2

你好像在用超级强子。您需要在initTRPC添加superjson转换器。

路由器/路由器/应用程序

import { initTRPC } from '@trpc/server';
import superjson from 'superjson';
export const t = initTRPC.create({
  transformer: superjson,
});

更详细的说明可以在这里找到：TRPC v10