Flutter GraphQL 请求插件 alice_graphql 的使用

alice_graphql 是一个用于捕获和存储 HTTP 请求和响应的插件，现在增强了对 GraphQL 的支持。所有你需要连接到 gql 客户端（如 Ferry）所需的信息都在示例文件夹中。

alice_graphql 受到 Chuck 和 Chucker 的启发，能够捕获和存储 HTTP 请求和响应，并通过简单的用户界面查看它们。它支持多种 Dart HTTP 客户端插件和 GraphQL。

支持的 Dart HTTP 客户端插件和 GraphQL

• Dio
• gql_exec
• gql
• Ferry
• HttpClient（来自 dart:io 包）
• Http（来自 http/http 包）
• Chopper
• 通用 HTTP 客户端

特性

• 详细的日志记录每个 HTTP 调用（HTTP 请求，HTTP 响应）
• 检查器 UI 查看 HTTP 调用
• 将 HTTP 调用保存到文件
• 统计信息
• 在 HTTP 调用时通知
• 支持 Dart 中常用的 HTTP 客户端
• 错误处理
• 设备摇动以打开检查器
• HTTP 调用搜索
• Flutter/Android 日志

安装

1. 将以下依赖项添加到你的 pubspec.yaml 文件中：

dependencies:
  alice_graphql: ^0.4.1

1. 安装它：

$ flutter packages get

1. 导入包：

import 'package:alice_graphql_graphql/alice_graphql.dart';

使用

alice_graphql 配置

1. 创建 alice_graphql 实例：

Alice alice = Alice();

1. 添加导航键到你的应用程序：

MaterialApp(
  navigatorKey: alice.getNavigatorKey(),
  home: ...,
);

你需要添加此导航键以便显示检查器 UI。你也可以在 alice_graphql 中使用自己的导航键：

Alice alice = Alice(showNotification: true, navigatorKey: yourNavigatorKeyHere);

如果你需要延迟传递导航键，可以使用：

alice.setNavigatorKey(yourNavigatorKeyHere);

这是运行 alice_graphql 所需的最小配置。可以在 alice_graphql 构造函数中设置其他可选参数，这些参数将在下面展示。如果你不想更改任何设置，可以跳到 HTTP 客户端配置部分。

其他设置

你可以设置 showNotification 参数来显示通知。点击此通知将打开检查器：

Alice alice = Alice(..., showNotification: true);

你可以设置 showInspectorOnShake 参数来通过摇晃设备打开检查器（默认禁用）：

Alice alice = Alice(..., showInspectorOnShake: true);

如果你想传递另一个通知图标，可以使用 notificationIcon 参数。默认值为 @mipmap/ic_launcher：

Alice alice = Alice(..., notificationIcon: "myNotificationIconResourceName");

如果你想限制保存在内存中的 HTTP 调用的最大数量，可以使用 maxCallsCount 参数：

Alice alice = Alice(..., maxCallsCount: 1000));

如果你想更改 alice_graphql 的方向性，可以使用 directionality 参数。如果该参数设置为 null，则使用应用的方向性：

Alice alice = Alice(..., directionality: TextDirection.ltr);

如果你想隐藏分享按钮，可以使用 showShareButton 参数：

Alice alice = Alice(..., showShareButton: false);

HTTP 客户端配置

如果你使用的是 Dio，只需添加拦截器：

Dio dio = Dio();
dio.interceptors.add(alice.getDioInterceptor());

如果你使用的是 HttpClient 来自 dart:io 包：

httpClient
    .getUrl(Uri.parse("https://jsonplaceholder.typicode.com/posts"))
    .then((request) async {
        alice.onHttpClientRequest(request);
        var httpResponse = await request.close();
        var responseBody = await httpResponse.transform(utf8.decoder).join();
        alice.onHttpClientResponse(httpResponse, request, body: responseBody);
});

如果你使用的是 http 来自 http/http 包：

http.get('https://jsonplaceholder.typicode.com/posts').then((response) {
    alice.onHttpResponse(response);
});

如果你使用的是 Chopper，你需要添加拦截器：

chopper = ChopperClient(
    interceptors: [alice.getChopperInterceptor()],
);

注意！alice_graphql 会向请求中添加一个特殊的 alice_graphql_token 头，以便计算正确的 HTTP 调用 ID。

如果你有其他 HTTP 客户端，可以使用通用 HTTP 调用接口：

AliceHttpCall aliceHttpCall = AliceHttpCall(id);
alice.addHttpCall(aliceHttpCall);

手动显示检查器

如果你不使用摇晃或通知，可能需要手动显示检查器：

alice.showInspector();

保存调用

alice_graphql 支持将日志保存到移动设备存储。为了使保存功能工作，你需要在 Android 应用程序清单中添加以下权限：

<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

Flutter 日志

如果你想在 alice_graphql 中记录 Flutter 日志，可以使用以下方法：

alice.addLog(log);

alice.addLogs(logList);

检查器状态

检查当前检查器是否打开（已打开/已关闭）：

alice.isInspectorOpened();

扩展

你可以使用扩展来缩短 HTTP 和 HTTP 客户端代码。这虽然是可选的，但可能会改善你的代码库。

示例

导入：

import 'package:alice_graphql_graphql/core/alice_graphql_http_client_extensions.dart';
import 'package:alice_graphql_graphql/core/alice_graphql_http_extensions.dart';

使用扩展：

http
    .post('https://jsonplaceholder.typicode.com/posts', body: body)
    .interceptWithAlice(alice, body: body);

httpClient
    .postUrl(Uri.parse("https://jsonplaceholder.typicode.com/posts"))
    .interceptWithAlice(alice, body: body, headers: Map());

示例

完整的示例代码见：https://github.com/jhomlala/alice_graphql/blob/master/example/lib/main.dart

要运行项目，你需要在终端中运行以下命令：

flutter pub run build_runner build --delete-conflicting-outputs