我正在用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
1条答案
按热度按时间2w2cym1i1#
有一个类似的问题,但结果是我们在新的src文件夹中丢失了apihandler 'page'。不过看起来你的repo不是这样的。