將代碼移動到 src 時 tRPC 停止工作

Question

我正在使用 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 的 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>();

配置 _app.tsx

我剛剛復制了文檔中的代碼，我想刪除getURL function 。

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目錄中，以清理我項目的根目錄。 這是在第 7 行的src/pages/index.ts中出現的問題，這是完成查詢的地方。 我稍微更新了我的文件結構，並修復了所有導入，所以這是我當前的文件結構。

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

Answer 1

有一個類似的問題，但事實證明我們在新的 src 文件夾中缺少 apihandler 'page'。 不過，您的回購協議似乎並非如此。