Nextjs中，关于tRPC的实践

本文中所有代码运行的环境：

• next: 14.2.3
• @tanstack/react-query 5.39.0
• @trpc/client 11.0.0-rc.364
• @trpc/react-query 11.0.0-rc.364
• @trpc/server 11.0.0-rc.364

什么是tRPC

tRPC（TypeScript Remote Procedure Call）是一种用于构建类型安全、基于 RPC（远程过程调用）风格的 API 的工具库。tRPC 主要用于 TypeScript 和 Node.js 项目，能够在客户端和服务器端之间共享类型定义，从而确保类型安全性和开发效率。

什么是RPC

RPC（Remote Procedure Call，远程过程调用）是一种协议，允许程序调用远程计算机上的函数或过程，就像调用本地函数一样。RPC 协议隐藏了网络通信的复杂性，使开发者能够更加专注于业务逻辑的实现。RPC 的主要目标是简化分布式计算环境中的通信，使不同系统之间的交互变得更加透明和高效。

tRPC的优势

• 类型安全：tRPC 允许在客户端和服务器端共享 TypeScript 类型定义，确保 API 调用的类型安全。这意味着你可以在客户端调用 API 时获得类型提示和编译时检查，减少运行时错误。
• 高效通信：tRPC 基于 HTTP 进行通信，但采用 RPC 风格的 API 调用，类似于 gRPC。RPC 是一种跨端函数调用协议，比传统的 HTTP 请求更加高效。
• 自动同步 API：tRPC 能够自动同步服务器端的 API，在客户端调用这些 API 时保持类型一致。这种方式减少了前后端代码不一致的可能性，提高了开发效率。
• 无依赖：tRPC 是一个零依赖的库，意味着它不依赖于任何特定的框架或库，可以与任意 Node.js 框架（如 Express、Fastify、Next.js 等）一起使用。

tRPC 的工作原理

tRPC 的工作原理是通过定义共享的类型和接口，在客户端和服务器之间传递这些类型安全的数据。

创建Next.js项目

npx create-next-app@latest

选择自己需要的选项，如下图

创建tRPC

安装相关依赖

pnpm add @trpc/server@next @trpc/client@next

在app同级目录下，创建server/_app.ts 和 server/trpc.ts

server/trpc.ts 中代码 主要是初始化tRPC并创建一个tRPC实例t。这个实例包含了创建路由器和定义过程的方法，也就是router和procedure

import { initTRPC } from '@trpc/server'

const t = initTRPC.create()

export const router = t.router
export const publicProcedure = t.procedure

server/_app.ts中代码 主要是定义了一个简单的 tRPC 路由器，其中包含一个名为 greeting 的查询操作。当客户端调用这个查询时，服务器将返回字符串 'hello tRPC v10!'。

import { publicProcedure, router } from './trpc'
export const appRouter = router({
  greeting: publicProcedure.query(() => 'hello tRPC v10!')
})

export type AppRouter = typeof appRouter

通过tRPC创建API

在app目录下创建api/trpc/[...trpc]/route.ts

定义请求处理器

import { fetchRequestHandler } from "@trpc/server/adapters/fetch";
import { NextRequest } from "next/server";
import { appRouter } from "@/server/_app";

const handler = (request: NextRequest) => { 
  return fetchRequestHandler({
    endpoint: '/api/trpc',
    req: request,
    router: appRouter,
    createContext:()=>({})
  })
}

export { handler as GET, handler as POST } 

fetchRequestHandler 配置：

• endpoint：指定 tRPC API 的端点，这里设置为 '/api/trpc'。
• req：传入的请求对象，即 NextRequest 实例。
• router：传入的 tRPC 路由器，即 appRouter，用于处理请求并返回响应。
• createContext：用于创建请求上下文的函数，这里返回一个空对象 {}。上下文可以包含请求的相关信息，如用户信息、数据库连接等。

创建 tRPC 客户端实例

安装相关依赖

pnpm add @trpc/server@next @trpc/client@next

创建utils/api.ts

主要是创建一个 tRPC 客户端实例 trpcClient，用于在客户端与服务器端进行通信。使用AppRouter（从服务器端导入的类型定义），确保客户端调用的 API 类型安全。通过createTRPCClient 和 httpBatchLink进行tRPC的创建与配置。

import { AppRouter } from "@/server/_app";
import { createTRPCClient, httpBatchLink } from "@trpc/client";

export const trpcClient = createTRPCClient<AppRouter>({
  links: [
    httpBatchLink({
      url: 'http://localhost:3000/api/trpc'
    })
  ]
})

在page.tsx中使用trpcClient

'use client'
import { trpcClient } from "@/utils/api";
import { useEffect } from "react";

export default function Home () {
  
  useEffect(() => { 
    trpcClient.greeting.query()
  },[])

  return (
    <div>hello world</div>
  );
}

然后我们在控制台可以看到