Flutter TRPC客户端插件trpc_client的使用

发布于 1周前 作者 sinazl 来自 Flutter

Flutter TRPC客户端插件trpc_client的使用

描述

此README描述了该包。如果您将此包发布到pub.dev，则README的内容将出现在您的包的着陆页面上。

有关如何编写良好包README的信息，请参阅撰写包页面指南。

有关开发包的一般信息，请参阅Dart指南中的创建库包和Flutter指南中的开发包和插件。

特性

  • 运行针对您tRPC服务器（expressjs、Next.js、Cloudflare Worker等）的查询和突变操作。
  • 从您的tRPC路由器生成绑定，以在查询和突变中具有类型安全性。更多信息请参阅这里。

使用方法

只需用trpc base endpoint实例化TRPCClient类。您可以可选地传递头部：

// 导入包
import 'package:trpc_client/trpc_client.dart';

// 实例化客户端
final client = TRPCClient(
  baseUri: "https://example.com/trpc",
  headers: {"x-trpc-source": "Dart App"},
);

现在您可以使用类型安全进行查询和突变：

final response = await client.query<Map<String, dynamic>>("route", payload: {"userId": "example"});

if (response.isError) {
  print(response.errors);
} else {
  final data = response.successResponse.data;
}

使用Riverpod (Provider)

我推荐将其与riverpod一起使用，以便于身份验证：

[@riverpod](/user/riverpod)
TRPCClient trpcClient(TrpcClientRef ref) {
  final sessionId = ref.watch(sessionIdProvider);

  final client = TRPCClient(
    baseUri: "https://example.com/trpc",
    headers: {"Authorization": "Bearer $sessionId"},
  );

  return client;
}

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

Harmonyos Next教程
1 回复

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


当然，以下是一个关于如何使用Flutter中的trpc_client插件与TRPC服务器进行通信的代码示例。假设你已经有了一个TRPC服务器在运行，并且你已经定义了一些路由。

首先，确保你已经在pubspec.yaml文件中添加了trpc_client依赖：

dependencies:
  flutter:
    sdk: flutter
  trpc_client: ^最新版本号  # 请替换为实际的最新版本号

然后，运行flutter pub get来获取依赖。

接下来，我们编写一个Flutter应用，它使用trpc_client与TRPC服务器进行通信。以下是一个完整的示例：

import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'package:trpc_client/trpc_client.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter TRPC Client Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  late TRPCClient _client;

  @override
  void initState() {
    super.initState();
    // 初始化TRPC客户端
    _client = TRPCClient(
      url: Uri.parse('https://your-trpc-server-url.com/api'), // 替换为你的TRPC服务器URL
      httpClient: http.Client(),
    );
  }

  @override
  void dispose() {
    // 关闭HTTP客户端
    _client.httpClient.close();
    super.dispose();
  }

  Future<void> fetchData() async {
    try {
      // 假设你有一个名为'hello'的路由，它接受一个名为'name'的参数并返回一个字符串
      final result = await _client.query(
        route: 'hello',
        input: {'name': 'World'},
      );

      // 处理结果
      print('Received data: ${result.data}');
      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(content: Text('Received data: ${result.data}')),
      );
    } catch (e) {
      // 处理错误
      print('Error: $e');
      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(content: Text('Error fetching data: $e')),
      );
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter TRPC Client Demo'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: fetchData,
          child: Text('Fetch Data from TRPC Server'),
        ),
      ),
    );
  }
}

在这个示例中，我们做了以下几件事：

  1. 在pubspec.yaml文件中添加了trpc_client依赖。
  2. 创建了一个Flutter应用，并在MyHomePage中初始化了TRPCClient实例。
  3. 使用_client.query方法调用TRPC服务器的hello路由，并传递了一个包含name参数的输入对象。
  4. 在按钮点击事件中调用fetchData方法，从TRPC服务器获取数据，并在SnackBar中显示结果或错误信息。

请确保将https://your-trpc-server-url.com/api替换为你的实际TRPC服务器URL，并根据你的TRPC服务器定义调整路由和输入参数。

这个示例展示了如何使用trpc_client插件与TRPC服务器进行基本的通信。根据你的实际需求，你可能需要处理更复杂的数据结构和错误处理逻辑。

回到顶部