首页手记 TRPC教程：新手快速入门指南

TRPC教程：新手快速入门指南

标签：

数据结构接口测试 API

概述

本文提供了TRPC教程，帮助新手快速入门，涵盖了安装、环境搭建、创建第一个TRPC服务和常见问题解答等内容。文章详细介绍了服务端和客户端的代码示例，并提供了实战项目的演示。通过本教程，读者可以掌握TRPC的基本使用方法和进阶技巧。

TRPC简介

TRPC是什么

TRPC (Type-safe Remote Procedure Call) 是一个基于TypeScript的远程过程调用库，它提供了一种简单的方式来构建可扩展的、类型安全的服务端和客户端API。TRPC主要用于构建微服务架构，特别适合于Node.js和React应用。使用TRPC可以简化API的定义和实现，同时提高代码的可维护性。

TRPC的优势和应用场景

TRPC的优势包括：

类型安全: TRPC使用TypeScript，所有API参数和返回值都有类型定义，减少了运行时错误。
易用性: TRPC提供了简洁的API定义语法，使得服务端和客户端代码都更加清晰和易于维护。
可扩展性: TRPC支持多种中间件，可以方便地添加日志记录、身份验证等功能。
性能优化: TRPC支持多种数据传输格式，如JSON和Protobuf，可以灵活选择以适应不同的性能需求。

应用场景包括：

微服务架构：多个服务通过TRPC进行通信，实现模块化开发。
前后端分离：前端React应用通过TRPC调用后端Node.js服务。
跨语言开发：TRPC可以与多种语言的服务进行交互，如Python、Go等。

安装与环境搭建

安装Node.js

首先需要安装Node.js。Node.js是运行JavaScript代码的运行时环境，对于开发TRPC应用来说是必不可少的。你可以访问Node.js官网（https://nodejs.org/）下载并安装最新版本的Node.js。

# 在终端中运行以下命令检查Node.js是否安装成功
node -v
# 输出版本号表示安装成功

安装TRPC

安装TRPC需要使用npm（Node Package Manager）。通过npm安装TRPC可以非常方便地将其引入到你的项目中。

# 创建一个新的Node.js项目
mkdir trpc-quickstart
cd trpc-quickstart
npm init -y

# 安装TRPC
npm install @trpc/server @trpc/client @trpc/react-query @trpc/compat
npm install react react-dom react-query

安装完成后，你的项目目录将包括TRPC相关的依赖库。

创建第一个TRPC服务

服务端代码示例

服务端代码主要负责定义API并处理客户端请求。以下是一个简单的服务端示例，定义了一个名为hello的API，它接受一个字符串参数并返回一个问候信息。

// server.ts
import { createTRPCHandle } from '@trpc/server';
import { createContext } from './context';
import { appRouter } from './routers';

const handler = createTRPCHandle({
  router: appRouter,
  createContext,
});

export default handler;

接下来，定义API的具体实现：

// routers.ts
import { createTRPCRouter, procedure, protectedProcedure } from './context';
import { z } from 'zod';

export const helloRouter = procedure.query(({ ctx, input }) => {
  return {
    greeting: `Hello ${input.name}`,
  };
});

export const appRouter = createTRPCRouter({
  hello: helloRouter,
});

客户端代码示例

客户端代码用来调用服务端定义的API。以下是一个React组件，展示了如何使用TRPC客户端调用服务端的hello API。

// App.tsx
import { trpc } from './utils/trpc';

function App() {
  const hello = trpc.hello.useQuery({ name: 'world' });

  return (
    <div>
      <h1>Hello {hello.data?.greeting}</h1>
    </div>
  );
}

export default App;

客户端配置

客户端需要配置来连接服务端。以下是一个简单的配置示例：

// utils/trpc.ts
import { createTRPCClient } from '@trpc/client';
import { httpBatchLinks } from '@trpc/client/links/httpBatching';
import superjson from 'superjson';
import { appRouter } from '../server/routers';

const trpc = createTRPCClient({
  url: '/trpc',
  transformer: superjson,
  router: appRouter,
  links: [
    httpBatchLinks(),
  ],
});

export default trpc;

中间件的使用

中间件可以用于在请求和响应之间执行额外的逻辑，例如日志记录、身份验证等。以下是一个简单的中间件示例，用于记录日志：

// context.ts
import { NextApiRequest, NextApiResponse } from 'next';
import { createTRPCRouter, procedure, protectedProcedure } from './context';
import { z } from 'zod';

export const loggerMiddleware = createMiddleware(async ({ ctx, next }) => {
  console.log(`Handling request: ${ctx.input.name}`);
  await next();
  console.log(`Completed request: ${ctx.input.name}`);
});

export const appRouter = createTRPCRouter({
  hello: procedure
    .input(z.string())
    .query(({ ctx, input }) => {
      return {
        greeting: `Hello ${input}`,
      };
    })
    .middleware(loggerMiddleware),
});

错误处理与日志记录

错误处理和日志记录是任何服务端应用的重要组成部分。TRPC提供了内置的错误处理机制，可以方便地捕获和处理错误。

// context.ts
import { createTRPCRouter, procedure, protectedProcedure } from './context';

export const appRouter = createTRPCRouter({
  hello: procedure
    .input(z.string())
    .query(({ ctx, input }) => {
      if (!input) {
        throw new Error('Name is required');
      }

      return {
        greeting: `Hello ${input}`,
      };
    }),
});

客户端可以通过使用useQuery的isError属性来处理错误。

// App.tsx
import { trpc } from './utils/trpc';

function App() {
  const hello = trpc.hello.useQuery({ name: 'world' });

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

  return (
    <div>
      <h1>Hello {hello.data?.greeting}</h1>
    </div>
  );
}

export default App;

常见问题与解答

常见错误及解决方案

运行时错误：最常见的运行时错误是类型不匹配。确保服务端和客户端的类型定义一致。
网络请求失败：检查服务端是否运行正常，并且客户端的URL配置正确。
中间件错误：确保中间件实现正确，并且中间件顺序合理。

常见疑问解答

是否需要使用TypeScript？：强烈推荐使用TypeScript，因为TRPC的核心特性是类型安全。
如何进行单元测试？：可以使用Jest等测试框架，对服务端和客户端API分别编写单元测试。
如何处理复杂的数据结构？：可以使用Zod库来定义复杂的数据结构，确保类型安全。

TRPC进阶使用

中间件的使用

中间件可以用于在请求和响应之间执行额外的逻辑，例如日志记录、身份验证等。以下是一个简单的中间件示例，用于记录日志：

// context.ts
import { NextApiRequest, NextApiResponse } from 'next';
import { createTRPCRouter, procedure, protectedProcedure } from './context';
import { z } from 'zod';

export const loggerMiddleware = createMiddleware(async ({ ctx, next }) => {
  console.log(`Handling request: ${ctx.input.name}`);
  await next();
  console.log(`Completed request: ${ctx.input.name}`);
});

export const appRouter = createTRPCRouter({
  hello: procedure
    .input(z.string())
    .query(({ ctx, input }) => {
      return {
        greeting: `Hello ${input}`,
      };
    })
    .middleware(loggerMiddleware),
});

错误处理与日志记录

错误处理和日志记录是任何服务端应用的重要组成部分。TRPC提供了内置的错误处理机制，可以方便地捕获和处理错误。

// context.ts
import { createTRPCRouter, procedure, protectedProcedure } from './context';

export const appRouter = createTRPCRouter({
  hello: procedure
    .input(z.string())
    .query(({ ctx, input }) => {
      if (!input) {
        throw new Error('Name is required');
      }

      return {
        greeting: `Hello ${input}`,
      };
    }),
});

客户端可以通过使用useQuery的isError属性来处理错误。

// App.tsx
import { trpc } from './utils/trpc';

function App() {
  const hello = trpc.hello.useQuery({ name: 'world' });

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

  return (
    <div>
      <h1>Hello {hello.data?.greeting}</h1>
    </div>
  );
}

export default App;

实战项目演示

一个简单的CRUD操作

本节将演示如何使用TRPC实现一个简单的CRUD操作，包括创建、读取、更新和删除用户信息。

服务端代码

首先定义用户模型和API。

// models/user.ts
import { z } from 'zod';

export const UserSchema = z.object({
  id: z.string(),
  name: z.string(),
  email: z.string(),
});

export type User = z.infer<typeof UserSchema>;

定义API接口：

// routers.ts
import { createTRPCRouter, procedure, protectedProcedure } from './context';
import { UserSchema } from '../models/user';

export const userRouter = createTRPCRouter({
  createUser: procedure
    .input(UserSchema.omit({ id: true }))
    .mutation(({ ctx, input }) => {
      const user = { id: generateId(), ...input };
      ctx.users.push(user);
      return user;
    }),

  getUser: procedure
    .input(UserSchema.pick({ id: true }))
    .query(({ ctx, input }) => {
      return ctx.users.find(user => user.id === input.id);
    }),

  updateUser: procedure
    .input(UserSchema.partial())
    .mutation(({ ctx, input }) => {
      const user = ctx.users.find(u => u.id === input.id);
      if (user) {
        Object.assign(user, input);
      }
      return user;
    }),

  deleteUser: procedure
    .input(UserSchema.pick({ id: true }))
    .mutation(({ ctx, input }) => {
      const index = ctx.users.findIndex(u => u.id === input.id);
      if (index !== -1) {
        ctx.users.splice(index, 1);
      }
      return true;
    }),
});

export const appRouter = createTRPCRouter({
  user: userRouter,
});

客户端代码

客户端代码可以使用React组件来调用服务端定义的API。

// App.tsx
import { trpc } from './utils/trpc';

function App() {
  const createUser = trpc.user.createUser.useMutation();
  const getUser = trpc.user.getUser.useQuery({ id: '1' });
  const updateUser = trpc.user.updateUser.useMutation();
  const deleteUser = trpc.user.deleteUser.useMutation();

  return (
    <div>
      <button onClick={() => createUser.mutate({ name: 'John Doe', email: 'john@example.com' })}>
        Create User
      </button>
      {getUser.data ? (
        <div>
          <h1>{getUser.data.name}</h1>
          <button onClick={() => updateUser.mutate({ id: '1', name: 'Jane Doe' })}>
            Update User
          </button>
          <button onClick={() => deleteUser.mutate({ id: '1' })}>Delete User</button>
        </div>
      ) : (
        <div>Loading...</div>
      )}
    </div>
  );
}

export default App;

项目部署与测试

部署TRPC应用可以分为服务端和客户端两部分。

服务端部署

使用Node.js部署服务端应用。以下是一个简单的部署示例：

安装依赖
```
npm install
```
启动应用
```
npm start
```

客户端部署

客户端应用通常使用现代前端框架（如React）来构建，可以使用构建工具（如Webpack）进行打包和部署。

安装依赖
```
npm install
```
构建应用
```
npm run build
```
运行应用
```
npm start
```

测试部署后的应用可以在浏览器中访问服务端和客户端应用，确认所有API调用都能正常工作。

总结

本教程详细介绍了如何使用TRPC构建类型安全的远程过程调用服务。从安装Node.js和TRPC，到创建第一个服务端和客户端应用，再到进阶的中间件使用和错误处理，最后通过一个简单的CRUD操作演示了实战项目。希望这篇教程能帮助你快速上手TRPC，并在实际项目中应用这些知识。如果你有任何问题，可以在TRPC的官方文档和社区寻求帮助。

点击查看更多内容

为 TA 点赞

若觉得本文不错，就分享一下吧！

评论

评论

共同学习，写下你的评论

评论加载中...

展开查看更多评论

作者其他优质文章

正在加载中

吃鸡游戏

手记
篇

粉丝

55

获赞与收藏

339

关注作者，订阅最新文章

阅读免费教程

数据结构入门教程

7个小节 23599 614

后端通用面试教程

41个小节 30583 343

ES6-10 入门教程

61个小节 93574 732

推荐

评论

收藏

共同学习，写下你的评论



感谢您的支持，我会继续努力的～

扫码打赏，你说多少就多少

赞赏金额会直接到老师账户

支付方式

打开微信扫一扫，即可进行扫码打赏哦

今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与放弃机会

点击
抽奖

慕课手记新用户专享福利

恭喜你，你的运气太好了，居然抽中了 100个积分！

恭喜你，抽中了价值元的专栏！

太棒了，直接落到你账户里！

积分商城里的罗技鼠标、机械键盘、
Kindle 阅读器、小米平衡车
Apple iPad （10.2英寸）、大额优惠券
在等着你去兑换了噢

作者：

免费赠送

兑换码：1111222211 复制

优惠券可用于购买实战课、体系课
无门槛使用

先去看看，有什么好东西马上兑换我爱学习，选课去


热搜

最近搜索清空

TRPC教程：新手快速入门指南

TRPC是什么

TRPC的优势和应用场景

安装Node.js

安装TRPC

服务端代码示例

客户端代码示例

客户端配置

中间件的使用

错误处理与日志记录

常见错误及解决方案

常见疑问解答

中间件的使用

错误处理与日志记录

一个简单的CRUD操作

服务端代码

客户端代码

项目部署与测试

服务端部署

客户端部署

阅读免费教程