如何使用Remix、Zod和Prisma搭建tRPC环境？

1. 安装核心依赖 #

首先安装tRPC相关包及依赖工具：

npm install @trpc/server @trpc/client @trpc/react-query @tanstack/react-query zod
# 或使用yarn
yarn add @trpc/server @trpc/client @trpc/react-query @tanstack/react-query zod

2. 创建tRPC服务端路由 #

在app/trpc/server.ts中定义你的tRPC服务逻辑：

import { initTRPC } from '@trpc/server';
import { z } from 'zod';

// 初始化tRPC实例
const t = initTRPC.create();

// 定义API路由
export const router = t.router({
  // 示例：接收name参数并返回问候语
  hello: t.procedure
    .input(z.object({ name: z.string() }))
    .query(({ input }) => {
      return {
        message: `Hello, ${input.name}!`
      };
    }),
  // 可添加更多业务路由
});

// 导出路由类型供客户端使用
export type Router = typeof router;

3. 配置Remix API路由处理tRPC请求 #

在app/routes/api/trpc/$.ts创建动态路由，处理所有tRPC请求：

import { fetchRequestHandler } from '@trpc/server/adapters/fetch';
import { router } from '~/trpc/server';

// 复用loader处理GET/POST请求
export const loader = async ({ request }) => {
  return fetchRequestHandler({
    endpoint: '/api/trpc',
    req: request,
    router,
    // 若需要上下文可在这里定义，比如获取用户会话
    createContext: async () => ({}),
  });
};

export const action = loader;

4. 创建tRPC客户端实例 #

在app/trpc/client.ts中初始化客户端：

import { createTRPCReact } from '@trpc/react-query';
import type { Router } from './server';

// 创建类型安全的tRPC客户端
export const trpc = createTRPCReact<Router>();

5. 在根组件中配置tRPC Provider #

修改app/root.tsx，注入tRPC和React Query的Provider：

import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { trpc } from '~/trpc/client';
import { httpBatchLink } from '@trpc/client';
import { useState } from 'react';
import { Outlet, Scripts } from '@remix-run/react';

export default function App() {
  const [queryClient] = useState(() => new QueryClient());
  const [trpcClient] = useState(() =>
    trpc.createClient({
      links: [
        httpBatchLink({
          url: '/api/trpc',
        }),
      ],
    })
  );

  return (
    <html lang="en">
      <head>
        <meta charSet="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <title>Remix + tRPC</title>
      </head>
      <body>
        <trpc.Provider client={trpcClient} queryClient={queryClient}>
          <QueryClientProvider client={queryClient}>
            <Outlet />
          </QueryClientProvider>
        </trpc.Provider>
        <Scripts />
      </body>
    </html>
  );
}

6. 在业务路由中调用tRPC API #

以app/routes/_index.tsx为例，使用tRPC请求数据：

import { trpc } from '~/trpc/client';

export default function Index() {
  const helloQuery = trpc.hello.useQuery({ name: 'Remix User' });

  if (helloQuery.isLoading) return <div>Loading...</div>;
  if (helloQuery.isError) return <div>Error: {helloQuery.error.message}</div>;

  return <h1>{helloQuery.data.message}</h1>;
}

内容的提问来源于stack exchange，提问作者Mayank Pathela