我正在用Next和TRPC创建一个简单的twitter克隆，我已经让tRPC工作了，但是我想把我所有的代码都移到src目录下。我注意到仅仅移动所有的代码，TRPC就停止工作了，并出现了以下错误：

TypeError: Cannot read properties of null (reading 'client')

首先，这是我的项目的文件结构，所有的文件都位于项目的根目录下。

.
├── components
├── containers
├── model
├── next.config.js
├── next-env.d.ts
├── package.json
├── pages
├── postcss.config.js
├── prettier.config.js
├── prisma
├── README.md
├── routers
├── tailwind.config.js
├── tsconfig.json
├── utils
└── yarn.lock

7 directories, 9 files

在这里，我遵循tRPC's set up guide for Next.js，它指示我执行以下更改。

创建tRPC路由器

我在routers/TweetRouter.ts创建了一个路由器。

export const tweetRouter = createRouter().query("all", {
  resolve() {
    const tweets: Tweet[] = [
      {
        id: 1,
        user: "Je12emy",
        text: "Hello world",
        likes: 2,
      },
      {
        id: 2,
        user: "Je12emy",
        text: "TRPC + Nextjs + Tailwind = T3 App",
        likes: 0,
      },
    ];
    return tweets;
  },
});

型
然后合并到pages/api/trpc/[trpc].ts中

import * as trpc from "@trpc/server";
import * as trpcNext from "@trpc/server/adapters/next";
import { tweetRouter } from "../../../routers/tweetRouter";

export function createRouter() {
  return trpc.router();
}
const router = createRouter().merge('tweet.', tweetRouter);

export const appRouter = router;
export type AppRouter = typeof router;

export default trpcNext.createNextApiHandler({
  router,
  onError({ error }) {
    if (error.code === "INTERNAL_SERVER_ERROR") {
      // send to bug reporting
      console.error("Something went wrong", error);
    }
  },
});

创建tRPC挂接

此操作应在utils/trpc.ts处完成

import { createReactQueryHooks } from '@trpc/react';
import type { AppRouter } from '../pages/api/trpc/[trpc]';

export const trpc = createReactQueryHooks<AppRouter>();

配置应用程序.tsx

我只是复制了文档中的代码，我想删除getURL函数。

function MyApp({ Component, pageProps }: AppProps) {
  const queryClient = new QueryClient();
  return (
    <QueryClientProvider client={queryClient}>
      <Component {...pageProps} />{" "}
    </QueryClientProvider>
  );
}

function getBaseUrl() {
  if (typeof window !== 'undefined') {
    return '';
  }
  // reference for vercel.com
  if (process.env.VERCEL_URL) {
    return `https://${process.env.VERCEL_URL}`;
  }

  // reference for render.com
  if (process.env.RENDER_INTERNAL_HOSTNAME) {
    return `http://${process.env.RENDER_INTERNAL_HOSTNAME}:${process.env.PORT}`;
  }

  // assume localhost
  return `http://localhost:${process.env.PORT ?? 3000}`;
}

export default withTRPC<AppRouter>({
  config({ ctx }) {
    /**
     * If you want to use SSR, you need to use the server's full URL
     * @link https://trpc.io/docs/ssr
     */
    return {
      url: `${getBaseUrl()}/api/trpc`,
      /**
       * @link https://react-query-v3.tanstack.com/reference/QueryClient
       */
      // queryClientConfig: { defaultOptions: { queries: { staleTime: 60 } } },
    };
  },
  /**
   * @link https://trpc.io/docs/ssr
   */
  ssr: true,
})(MyApp);

发出API请求

最后，我可以导入客户端并发送API请求，这与预期的一样

import type { NextPage } from "next";
import TweetCard from "../components/TweetCard";
import PageContainer from "../containers/Page";
import { trpc } from "../utils/trpc";

const Home: NextPage = () => {
  const { data, isLoading } = trpc.useQuery(["tweet.all"]);

  if (isLoading) {
    return (
      <PageContainer className="flex items-center justify-center">
        <p> loading... </p>
      </PageContainer>
    );
  }

  if (!data) {
    return (
      <PageContainer className="flex items-center justify-center">
        <p> No Tweets </p>
      </PageContainer>
    );
  }

  return (
    <PageContainer className="flex flex-col space-y-3">
      {data.map((tweet) => (
        <TweetCard key={tweet.id} {...tweet} />
      ))}
    </PageContainer>
  );
};

export default Home;

因此，我决定提交这段代码，并将其移动到src目录中，以便清理项目的根目录。这里是src/pages/index.ts中第7行的问题，这是正在执行查询的地方。我稍微更新了我的文件结构，并修复了所有导入，因此这是我当前的文件结构。

src
├── backend
│   ├── model
│   │   ├── tweet.ts
│   │   └── user.ts
│   └── router
│       ├── index.ts
│       └── tweet.ts
├── components
│   ├── LikesCounter.tsx
│   └── TweetCard.tsx
├── containers
│   └── Page.tsx
├── pages
│   ├── api
│   │   └── trpc
│   │       └── [trpc].ts
│   ├── _app.tsx
│   └── index.tsx
├── styles
│   └── globals.css
└── utils
    └── trpc.ts

10 directories, 14 files

您可以在我的存储库中查看完整的代码：https://github.com/Je12emy/twitter-nextjs/tree/trpc_port