一、tRPC库简介

tRPC 是一个用于在客户端和服务器之间进行远程过程调用的 JavaScript 库。它基于 TypeScript，旨在提供易懂、类型稳固的方法来调用后端服务。tRPC 通过使用 TypeScript 的类型系统，促使在开发过程中就能捕捉到潜在的失误，从而节约代码的健壮性和可维护性。tRPC 拥护多种后端技术，如 Node.js、Express、Fastify 等，并且可以与 React、Vue 等前端框架无缝集成。

二、tRPC的核心特性

• 类型稳固：利用 TypeScript 的类型系统，确保客户端和服务器端类型一致。
• 自动生成客户端代码：选择服务器端的定义，自动生成客户端代码，简化开发流程。
• 轻量级：无依存，仅 5KB 大小，便于集成和使用。
• 拥护多种后端技术：Node.js、Express、Fastify 等。
• 拥护多种前端框架：React、Vue 等。

三、tRPC在演示项目中的应用解析

下面将通过一个易懂的示例项目来展示 tRPC 的实际应用。项目分为客户端和服务器端两部分，服务器端使用 Node.js 和 Express，客户端使用 React。

3.1 服务器端搭建

首先创建一个新的 Node.js 项目，并安装所需的依存：

npm init -y
npm install express @trpc/server @trpc/react-query @tanstack/react-query

3.2 创建tRPC服务

在服务器端创建一个 tRPC 服务，定义 API 接口和类型：

import { createRouter, createPublicClient } from '@trpc/server';
// 定义 API 接口
const appRouter = createRouter()
  .query('getUser', {
    resolve({ input }) {
      // 模拟数据库查询
      return { id: input, name: 'Alice' };
    },
  });
// 创建 tRPC 服务
export const trpc = createPublicClient(appRouter);

3.3 创建Express服务器

创建一个 Express 服务器，并使用 tRPC 服务：

import express from 'express';
import { trpc } from './trpc';
const app = express();
const port = 3000;
app.use('/trpc', trpc.createExpressMiddleware());
app.listen(port, () => {
  console.log(`Server is running at http://localhost:${port}`);
});

3.4 客户端搭建

创建一个新的 React 项目，并安装所需的依存：

npx create-react-app my-app
cd my-app
npm install @tanstack/react-query

3.5 创建tRPC客户端

在客户端创建一个 tRPC 客户端实例，并连接到服务器端：

import { createTRPCReactClient } from '@trpc/react-query';
import { trpc } from './trpc';
const trpcClient = createTRPCReactClient({
  url: 'http://localhost:3000/trpc',
  client: trpc,
});

3.6 在React组件中使用tRPC

在 React 组件中，使用 tRPC 客户端调用服务器端的 API 接口：

import React from 'react';
import { trpc } from './trpc';
const UserComponent = () => {
  const { data, error, isLoading } = trpcClient.useQuery(['getUser', { id: 1 }]);
  if (isLoading) return 
Loading...
;
  if (error) return 
Error: {error.message}
;
  return (
    
      
User
      
ID: {data.id}
      
Name: {data.name}
    
  );
};
export default UserComponent;

四、总结

通过上述示例项目，我们可以看到 tRPC 在实际应用中的便利性。它提供了类型稳固的远程过程调用，简化了客户端和服务器端的交互，促使开发者可以更加专注于业务逻辑的实现。tRPC 的自动代码生成和轻量级特性，也促使它成为了一个值得尝试的远程调用解决方案。

本文由IT视界版权所有,禁止未经同意的情况下转发