Flutter TRPC客户端代码生成插件trpc_client_generator的使用

Flutter TRPC客户端代码生成插件trpc_client_generator的使用

trpc_client_generator

trpc_client_generator 是一个用于将TRPC TypeScript路由和类型映射到Dart的工具。它结合了 trpc_client 和 trpc-extractor 来实现这一功能。

使用要求

安装

首先，在你的项目中添加 trpc_client_generator 作为开发依赖：

dev_dependencies:
  trpc_client_generator: ^0.1.0

然后运行以下命令来获取依赖项：

flutter pub get

配置

在你的 pubspec.yaml 文件中，配置 trpc_client_generator 的输入和输出路径：

trpc_client_generator:
  input:
    - path/to/your/typescript/routes/file.ts
  output: lib/generated/trpc_client.dart

确保 input 路径指向包含你的TRPC TypeScript定义的文件。

生成代码

在终端中运行以下命令来生成Dart代码：

flutter pub run trpc_client_generator

这将在指定的输出路径生成Dart代码文件。

示例代码

TypeScript定义文件（例如 src/routes.ts）

// src/routes.ts
export const exampleRouter = {
  hello: {
    sayHello: {
      input: { name: string },
      output: { message: string }
    }
  }
}

Dart代码生成

运行上述 flutter pub run trpc_client_generator 命令后，将会在指定的输出路径生成类似如下的Dart代码：

// lib/generated/trpc_client.dart
import 'package:trpc_client/trpc_client.dart';

class ExampleRouter {
  final _client;

  ExampleRouter(this._client);

  Future<Map<String, dynamic>> sayHello({required String name}) async {
    final response = await _client.request(
      method: 'POST',
      path: '/trpc/exampleRouter.hello.sayHello',
      body: {'name': name},
    );
    return response.data;
  }
}

使用生成的代码

在你的Flutter应用中，你可以这样使用生成的代码：

void main() async {
  // 初始化TRPC客户端
  final client = TRPCClient('http://localhost:8080');

  // 创建ExampleRouter实例
  final exampleRouter = ExampleRouter(client);

  // 调用sayHello方法
  final response = await exampleRouter.sayHello(name: 'World');
  print(response);
}

更多关于Flutter TRPC客户端代码生成插件trpc_client_generator的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter TRPC客户端代码生成插件trpc_client_generator的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


trpc_client_generator 是一个用于 Flutter 的代码生成插件，它可以帮助你自动生成基于 tRPC 协议的客户端代码。通过使用这个插件，你可以减少手动编写客户端代码的工作量，并确保生成的代码与服务器端的 tRPC 接口保持一致。

以下是使用 trpc_client_generator 的基本步骤：

1. 安装依赖

首先，你需要在 pubspec.yaml 文件中添加 trpc_client_generator 和 build_runner 作为开发依赖：

dev_dependencies:
  trpc_client_generator: ^0.0.1 # 请使用最新版本
  build_runner: ^2.1.0

然后运行 flutter pub get 来安装依赖。

2. 定义 tRPC 服务

在你的 Flutter 项目中，创建一个 Dart 文件来定义你的 tRPC 服务。例如，创建一个 trpc_service.dart 文件：

import 'package:trpc/trpc.dart';

@trpc
class MyService {
  @trpcMethod
  Future<String> sayHello(String name) async {
    // 这里通常是调用远程服务的逻辑
    return 'Hello, $name!';
  }
}

3. 生成客户端代码

使用 build_runner 来生成客户端代码。在终端中运行以下命令：

flutter pub run build_runner build

这将根据你在 trpc_service.dart 中定义的 tRPC 服务生成相应的客户端代码。

4. 使用生成的客户端代码

生成的客户端代码将会在 lib 目录下的 .g.dart 文件中。你可以直接在你的 Flutter 应用中使用这些生成的代码来调用 tRPC 服务。

import 'package:your_app/trpc_service.g.dart';

void main() async {
  final client = MyServiceClient();

  final response = await client.sayHello('World');
  print(response); // 输出: Hello, World!
}

5. 配置 tRPC 客户端

通常你需要配置 tRPC 客户端以连接到你的服务器。你可以在生成的客户端代码的基础上进行配置：

import 'package:trpc/trpc.dart';
import 'package:your_app/trpc_service.g.dart';

void main() async {
  final trpcClient = TRPCClient(
    baseUrl: 'https://your-server-url.com',
  );

  final client = MyServiceClient(trpcClient);

  final response = await client.sayHello('World');
  print(response); // 输出: Hello, World!
}

6. 持续集成

如果你希望在持续集成（CI）中自动生成代码，可以在 CI 配置中添加以下步骤：

- flutter pub get
- flutter pub run build_runner build
回到顶部