TRPC入门：基础概念与实战教程

2024/10/18 23:02:30

本文主要是介绍TRPC入门：基础概念与实战教程，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

本文介绍了TRPC入门的相关内容，涵盖了TRPC的基本概念、核心特性和环境搭建，帮助开发者快速上手TRPC。文章详细讲解了从环境搭建到创建第一个TRPC服务的步骤，并提供了实战案例和常见问题解决方法。

TRPC简介

什么是TRPC

TRPC（TanRPC）是一个基于Node.js和TypeScript的高性能RPC框架，它提供了一种轻量且易于使用的RPC服务开发和调用方式。TRPC主要用于构建微服务架构中的服务间通信，可以大大简化服务间交互的复杂性，提高开发效率和系统灵活性。

TRPC的核心特性包括：

类型安全：TRPC利用TypeScript的静态类型系统来确保服务端和客户端之间的接口定义一致性，从而减少运行时错误。
高性能：TRPC采用非阻塞的异步I/O模型，通过现代的JavaScript/TypeScript技术栈实现高效的网络通信。
易用性：TRPC提供简洁的API设计和配置方式，使得开发者可以快速上手并构建服务。
插件机制：TRPC内置了丰富的中间件支持，可以方便地对服务进行扩展和定制。

TRPC的特点和优势

高性能与低延迟：TRPC采用现代Node.js的异步I/O模型，确保服务的高性能和低延迟响应。
类型安全：TRPC利用TypeScript的静态类型检查系统，确保服务端和客户端的接口定义的一致性，减少运行时错误。
易用性：TRPC提供简洁的API设计和配置方式，使得开发者可以快速上手并构建服务。
可扩展性：TRPC支持插件机制，可以方便地对服务进行扩展和定制，满足不同业务需求。
丰富的中间件支持：内置了丰富的中间件支持，比如日志记录、错误处理、身份验证等，便于开发者使用。

环境搭建

准备开发环境

为了搭建TRPC开发环境，需要满足以下前提条件：

Node.js：安装最新版本的Node.js，可以从Node.js官方网站下载。
TypeScript：安装TypeScript编译器。可以使用npm进行安装：
```
npm install -g typescript
```
Node.js模块：安装TRPC所需的模块。后续步骤中会详细介绍。

确保以上环境已准备好后，可以进行下一步操作。

安装依赖库

安装TRPC的依赖库需要确保Node.js和npm已经正确配置。以下是安装过程：

创建一个新的Node.js项目：

mkdir trpc-project
cd trpc-project
npm init

安装TRPC和相关依赖：

npm install @trpc/server @trpc/client @trpc/react-query @trpc/compat @tanstack/react-query

完成安装后，项目中应该包含以下几个主要模块：
- @trpc/server：用于定义和实现服务器端的逻辑。
- @trpc/client：用于定义和实现客户端的逻辑。
- @trpc/react-query：用于在React应用中使用TRPC。
- @trpc/compat：提供了一些兼容性和辅助功能。
- @tanstack/react-query：用于在React应用中高效管理数据。

创建第一个TRPC服务

服务端开发步骤

定义路由：
使用@trpc/server来定义服务端的路由和处理逻辑。首先，我们需要创建一个新的TypeScript文件，例如server.ts。

import { createRouter } from '@trpc/server';
import { t } from './trpc';

const appRouter = createRouter().query('hello', {
    input: t.inputType,
    output: t.outputType,
    resolve: ({ input }) => {
        return `Hello, ${input.name}!`;
    },
});

export type AppRouter = typeof appRouter;

启动HTTP服务：
使用http或express等中间件来启动HTTP服务，监听指定端口。

import express from 'express';
import { createTRPCHandle } from '@trpc/server';
import { appRouter } from './server';
import { type } from './trpc';

const app = express();
const port = 3000;

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

app.use('/trpc', trpc.createExpressMiddleware());

app.listen(port, () => {
    console.log(`Server running on port ${port}`);
});

function createContext() {
    return {};
}

运行服务：
使用npm run start命令启动服务。
```
npm run start
```

客户端调用方法

安装TRPC客户端：
```
npm install @trpc/client
```

设置客户端配置：
在客户端代码中设置HTTP客户端和TRPC客户端。

import { createTRPCClient } from '@trpc/client';
import { httpBatchLink } from '@trpc/client/links';
import superjson from 'superjson';

const trpcClient = createTRPCClient({
    links: [
        httpBatchLink({
            url: 'http://localhost:3000/trpc',
        }),
    ],
    transformer: superjson,
});

调用服务端方法：
使用客户端调用服务端定义的方法。

const response = await trpcClient.query.hello.query({ input: { name: 'World' } });
console.log(response);

TRPC核心概念解析

请求和响应

TRPC遵循标准的请求-响应模型，客户端发出请求，服务端处理请求并返回响应。请求和响应是通过定义在服务端的路由来实现的。

请求：客户端发送的请求数据，可以包含输入参数和请求头。
响应：服务器端处理请求后返回的数据，包含输出数据和响应头。

定义请求示例：

import { createRouter } from '@trpc/server';
import { t } from './trpc';

const appRouter = createRouter().query('hello', {
    input: t.inputType,
    output: t.outputType,
    resolve: ({ input }) => {
        return `Hello, ${input.name}!`;
    },
});

中间件机制

TRPC支持中间件机制，中间件可以在请求的处理过程中插入自定义逻辑，如日志记录、错误处理、身份验证等。

中间件定义：中间件函数通常接收一个next函数作为参数，用于调用下一个中间件或结束请求处理。
中间件应用：可以在createRouter中定义多个中间件，并在请求处理之前或之后执行。

定义中间件示例：

import { createRouter } from '@trpc/server';

const appRouter = createRouter()
    .middleware((opts) => {
        console.log(`Request received for: ${opts.input.name}`);
    })
    .query('hello', {
        input: t.inputType,
        output: t.outputType,
        resolve: ({ input }) => {
            return `Hello, ${input.name}!`;
        },
    });

实战案例：实现用户管理系统

功能需求分析

用户管理系统的基本功能包括用户注册、用户登录、用户信息查询和用户信息更新。具体需求如下：

用户注册：用户可以通过用户名、邮箱、密码等信息注册新账号。
用户登录：用户可以通过用户名和密码登录系统。
用户信息查询：用户可以查询自己的基本信息。
用户信息更新：用户可以更新自己的基本信息，如邮箱、密码等。

代码实现细节

首先，创建服务端代码，定义用户服务的路由和处理逻辑。

定义用户服务：

import { createRouter } from '@trpc/server';
import { t } from './trpc';

const appRouter = createRouter()
    .mutation('registerUser', {
        input: t.registerUserInput,
        output: t.registerUserOutput,
        resolve: ({ input }) => {
            // 模拟数据库操作
            const users = [
                { id: 1, username: 'alice', email: 'alice@example.com', password: '123456' },
            ];
            const user = { id: users.length + 1, username: input.username, email: input.email, password: input.password };
            users.push(user);
            return user;
        },
    })
    .query('getUser', {
        input: t.getUserInput,
        output: t.getUserOutput,
        resolve: ({ input }) => {
            // 模拟数据库操作
            const users = [
                { id: 1, username: 'alice', email: 'alice@example.com', password: '123456' },
            ];
            return users.find(user => user.id === input.id);
        },
    })
    .mutation('updateUser', {
        input: t.updateUserInput,
        output: t.updateUserOutput,
        resolve: ({ input }) => {
            // 模拟数据库操作
            let users = [
                { id: 1, username: 'alice', email: 'alice@example.com', password: '123456' },
            ];
            const user = users.find(user => user.id === input.id);
            if (user) {
                user.email = input.email;
                user.password = input.password;
            }
            return user;
        },
    });

启动HTTP服务：

import express from 'express';
import { createTRPCHandle } from '@trpc/server';
import { appRouter } from './server';
import { type } from './trpc';

const app = express();
const port = 3000;

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

app.use('/trpc', trpc.createExpressMiddleware());

app.listen(port, () => {
    console.log(`Server running on port ${port}`);
});

function createContext() {
    return {};
}

客户端代码：

import { createTRPCClient } from '@trpc/client';
import { httpBatchLink } from '@trpc/client/links';
import superjson from 'superjson';

const trpcClient = createTRPCClient({
    links: [
        httpBatchLink({
            url: 'http://localhost:3000/trpc',
        }),
    ],
    transformer: superjson,
});

async function registerUser() {
    const response = await trpcClient.mutation.registerUser.mutate({
        input: { username: 'bob', email: 'bob@example.com', password: '123456' },
    });
    console.log(response);
}

async function getUser() {
    const response = await trpcClient.query.getUser.query({ input: { id: 1 } });
    console.log(response);
}

async function updateUser() {
    const response = await trpcClient.mutation.updateUser.mutate({
        input: { id: 1, email: 'alice_new@example.com', password: 'newpassword' },
    });
    console.log(response);
}

registerUser();
getUser();
updateUser();

通过以上步骤，用户管理系统的基本功能已经实现，并可以通过TRPC服务端和客户端进行调用。

常见问题与解决方法

常见错误及解决

在使用TRPC的过程中，可能会遇到一些常见的错误，以下是一些常见问题及其解决方法：

未定义的类型错误：

// 错误示例
import { createRouter } from '@trpc/server';
import { t } from './trpc';

const appRouter = createRouter().query('hello', {
    input: t.inputType,
    output: t.outputType,
    resolve: ({ input }) => {
        return `Hello, ${input.name}!`;
    },
});

解决方法：

import { createRouter } from '@trpc/server';
import { t } from './trpc';

const appRouter = createRouter().query('hello', {
    input: t.inputType,
    output: t.outputType,
    resolve: ({ input }) => {
        return `Hello, ${input.name}!`;
    },
});

export type AppRouter = typeof appRouter;

客户端调用错误：

// 错误示例
import { createTRPCClient } from '@trpc/client';
import { httpBatchLink } from '@trpc/client/links';
import superjson from 'superjson';

const trpcClient = createTRPCClient({
    links: [
        httpBatchLink({
            url: 'http://localhost:3000/trpc',
        }),
    ],
    transformer: superjson,
});

async function registerUser() {
    const response = await trpcClient.mutation.registerUser.mutate({
        input: { username: 'bob', email: 'bob@example.com', password: '123456' },
    });
    console.log(response);
}