Flutter GraphQL数据集成插件datadog_gql_link的使用

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

Flutter GraphQL数据集成插件datadog_gql_link的使用

Datadog GraphQL Link

Datadog GraphQL Link 是一个与 gql_link 兼容的包，用于在 Datadog 中跟踪 GraphQL 调用。 通过 Real User Monitoring (RUM)，您可以执行以下操作：

  • 识别 GraphQL 查询和突变
  • 识别查询和突变中使用的 GraphQL 变量

Getting started

要使用 datadog_gql_link，请将其添加到终止链接之上，当使用 Link.from 或 Link.concat 时。例如：

final graphQlUrl = "https://example.com/graphql";

final link = Link.from([
  DatadogGqlLink(DatatadogSdk.instance, Uri.parse(graphQlUrl)),
  HttpLink(graphQlUrl),
]);

如果您正在使用 datadog_gql_link 与 datadog_tracking_http_client 结合使用，则需要将跟踪插件忽略您的 GraphQL 端点请求，否则资源可能会重复报告，并且 APM 跟踪可能被破坏。您可以通过在 datadog_tracking_http_client 版本 2.1.0 中添加 ignoreUrlPatterns 参数来忽略您的 GraphQL 端点。

final datadogConfig = DatadogConfiguration(
    // Your configuration
) ..enableHttpTracking(
    ignoreUrlPatterns: [
      RegExp('example.com/graphql'),
    ],
);

Contributing

欢迎提出拉取请求。首先，打开一个议题讨论您想要更改的内容。更多信息，请阅读根仓库中的 Contributing guide。

License

Apache License, v2.0

示例代码

import 'package:flutter/material.dart';
import 'package:gql_flutter/gql_flutter.dart';
import 'package:datadog_gql_link/datadog_gql_link.dart';

void main() {
  final graphQlUrl = "https://example.com/graphql";
  final datadogConfig = DatadogConfiguration(
    // Your configuration
  )..enableHttpTracking(
    ignoreUrlPatterns: [
      RegExp('example.com/graphql'),
    ],
  );

  final link = Link.from([
    DatadogGqlLink(DatatadogSdk.instance, Uri.parse(graphQlUrl)),
    HttpLink(graphQlUrl),
  ]);

  runApp(MyApp(link));
}

class MyApp extends StatelessWidget {
  final Link link;

  MyApp(this.link);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter GraphQL Data Integration',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      homeBuilder: (context, state) => Scaffold(
        appBar: AppBar(
          title: Text(state.toString()),
        ),
        body: Center(
          child: Text(
            'Datadog GraphQL Link in use',
          ),
        ),
      ),
    );
  }
}

更多关于Flutter GraphQL数据集成插件datadog_gql_link的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter GraphQL数据集成插件datadog_gql_link的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，下面是一个关于如何在Flutter项目中使用datadog_gql_link插件进行GraphQL数据集成的代码示例。这个插件通常用于将GraphQL请求与Datadog监控集成，以便你可以监控和分析你的GraphQL API请求。

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

dependencies:
  flutter:
    sdk: flutter
  graphql_flutter: ^x.y.z  # 替换为最新版本号
  datadog_gql_link: ^a.b.c  # 替换为最新版本号

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

接下来，在你的Flutter项目中，你可以按照以下步骤配置datadog_gql_link：

  1. 初始化Datadog客户端：
import 'package:datadog_flutter/datadog_flutter.dart';

void initDatadog() {
  final datadogConfig = DatadogConfig(
    clientToken: 'YOUR_DATADOG_CLIENT_TOKEN',  // 替换为你的Datadog客户端令牌
    environment: 'production',  // 或 'staging', 'development' 等
    service: 'your_service_name',  // 你的服务名称
    version: '1.0.0',  // 你的应用版本
  );

  Datadog.initialize(appContext: null, configuration: datadogConfig);
}

确保在应用的入口点（例如main.dart）调用initDatadog()函数。

  1. 创建GraphQL客户端并集成Datadog Link：
import 'package:graphql_flutter/graphql_flutter.dart';
import 'package:datadog_gql_link/datadog_gql_link.dart';
import 'package:http/http.dart' as http;

void main() {
  initDatadog();

  // 创建HTTP客户端
  final httpLink = HttpLink(
    'https://your-graphql-endpoint.com/graphql',  // 替换为你的GraphQL端点
  );

  // 创建Datadog Link
  final datadogLink = DatadogLink(httpLink);

  // 创建ValueNotifier以在应用中共享GraphQL客户端
  final ValueNotifier<GraphQLClient> client = ValueNotifier(
    GraphQLClient(
      link: datadogLink,
      cache: InMemoryCache(),
    ),
  );

  runApp(MyApp(client: client));
}

class MyApp extends StatelessWidget {
  final ValueNotifier<GraphQLClient> client;

  MyApp({required this.client});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('GraphQL with Datadog')),
        body: MyHomePage(client: client),
      ),
    );
  }
}
  1. 在UI组件中使用GraphQL客户端：
import 'package:flutter/material.dart';
import 'package:graphql_flutter/graphql_flutter.dart';

class MyHomePage extends StatefulWidget {
  final ValueNotifier<GraphQLClient> client;

  MyHomePage({required this.client});

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final String query = r'''
    query {
      user(id: "1") {
        id
        name
      }
    }
  ''';

  @override
  Widget build(BuildContext context) {
    return Query(
      options: QueryOptions(document: gql(query)),
      builder: (QueryResult result, {VoidCallback? refetch, FetchMore? fetchMore}) {
        if (result.hasError) {
          return Text('Error: ${result.error!.message}');
        }

        if (result.loading) {
          return CircularProgressIndicator();
        }

        if (result.data != null) {
          final user = result.data!['user'];
          return ListTile(
            title: Text('User ID: ${user['id']}'),
            subtitle: Text('User Name: ${user['name']}'),
          );
        }

        return Text('No data');
      },
      client: widget.client.value,
    );
  }
}

在这个例子中，我们创建了一个Flutter应用，它使用graphql_flutter和datadog_gql_link插件来执行GraphQL查询，并将请求数据发送到Datadog进行监控。确保你已经替换了所有必要的配置值（如Datadog客户端令牌和GraphQL端点）。

这样，你的Flutter应用就能够通过GraphQL进行数据集成，并且所有GraphQL请求都会被Datadog监控。

回到顶部