Flutter GraphQL网络请求插件gql_http_link的使用

gql_http_link 是一个用于通过HTTP执行GraphQL请求的Dart库。它与 gql 库配合使用，以提供对GraphQL API的访问。

特性

通过HTTP发送GraphQL查询和变更。
支持在请求中添加自定义头信息（headers）。
可以轻松地与其他链接（Link）组合使用，构建复杂的请求链。

安装

在您的pubspec.yaml文件中添加依赖：

dependencies:
  gql_http_link: ^x.x.x # 替换为最新版本号
  gql_link: ^x.x.x # 同样替换为最新版本号

然后运行 flutter pub get 来安装这些包。

使用示例

下面是一个完整的Flutter应用示例，展示了如何配置并使用gql_http_link来发起GraphQL请求。

示例代码

main.dart

import 'package:flutter/material.dart';
import 'package:gql_http_link/gql_http_link.dart';
import 'package:gql_link/gql_link.dart';
import 'package:graphql/client.dart';

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

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

class GraphQLPage extends StatefulWidget {
  @override
  _GraphQLPageState createState() => _GraphQLPageState();
}

class _GraphQLPageState extends State<GraphQLPage> {
  final HttpLink httpLink = HttpLink('https://api.spacex.land/graphql/');
  final GraphQLClient client;

  _GraphQLPageState()
      : client = GraphQLClient(
          link: httpLink,
          cache: GraphQLCache(store: InMemoryStore()),
        );

  Future<void> fetchData() async {
    final QueryOptions options = QueryOptions(
      document: gql(r'''
        query GetLaunchDetails($flight_number: Int!) {
          launch(flight_number: $flight_number) {
            mission_name
            launch_date_local
            rocket {
              rocket_name
            }
          }
        }
      '''),
      variables: {'flight_number': 105},
    );

    final QueryResult result = await client.query(options);

    if (result.hasException) {
      print(result.exception.toString());
    } else {
      print(result.data);
    }
  }

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

运行效果

当您点击“Fetch Data”按钮时，应用程序将向SpaceX API发出GraphQL请求，并打印返回的数据到控制台。

注意事项

确保API URL正确无误，并且能够响应GraphQL查询。
在实际开发中，请考虑使用环境变量或安全存储方式管理API密钥等敏感信息。
对于生产环境的应用程序，建议设置适当的错误处理机制以及加载指示器。

如果您有任何问题或者需要进一步的帮助，请访问 GitHub Issues 页面提交反馈。

更多关于Flutter GraphQL网络请求插件gql_http_link的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

yuanlaile 1楼•2 天前

更多关于Flutter GraphQL网络请求插件gql_http_link的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

当然，以下是一个关于如何在Flutter项目中使用gql_http_link插件来进行GraphQL网络请求的示例代码。gql_http_link是Apollo Client for Flutter的一部分，用于通过HTTP与GraphQL服务器进行通信。

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

dependencies:
  flutter:
    sdk: flutter
  apollo_client: ^x.y.z  # 请使用最新版本
  gql: ^x.y.z  # 请使用最新版本
  gql_http_link: ^x.y.z  # 请使用最新版本

然后，执行flutter pub get来获取这些依赖项。

接下来，让我们编写一些代码来演示如何使用gql_http_link进行GraphQL查询。

创建一个GraphQL查询：

首先，定义一个GraphQL查询。假设我们有一个查询来获取用户信息：
```
# 在一个名为`queries.graphql`的文件中
query GetUser {
  user(id: "1") {
    id
    name
    email
  }
}
```

设置Apollo Client：

在你的Flutter项目中，设置Apollo Client并配置HTTP链接：

import 'package:flutter/material.dart';
import 'package:apollo_client/core.dart';
import 'package:gql_http_link/gql_http_link.dart';
import 'package:gql_exec/gql_exec.dart';
import 'package:normalize/normalize.dart';
import 'queries.graphql.dart';  // 假设你已经使用`apollo_codegen`生成了这个文件

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Flutter GraphQL Example'),
        ),
        body: GraphQLExample(),
      ),
    );
  }
}

class GraphQLExample extends StatefulWidget {
  @override
  _GraphQLExampleState createState() => _GraphQLExampleState();
}

class _GraphQLExampleState extends State<GraphQLExample> {
  ApolloClient? client;

  @override
  void initState() {
    super.initState();
    final HttpLink httpLink = HttpLink({
      'uri': 'https://your-graphql-endpoint.com/graphql',  // 替换为你的GraphQL服务器地址
    });

    final InMemoryCache cache = InMemoryCache();

    client = ApolloClient(
      link: httpLink,
      cache: cache,
    );
  }

  @override
  Widget build(BuildContext context) {
    return client == null
        ? Center(child: CircularProgressIndicator())
        : Center(
            child: ElevatedButton(
              onPressed: () async {
                final OperationResult<Map<String, dynamic>> result = await client!.query(
                  query: GetUserQuery(),
                );

                if (result.data != null) {
                  final user = result.data!['user'];
                  print('User ID: ${user['id']}');
                  print('User Name: ${user['name']}');
                  print('User Email: ${user['email']}');
                } else if (result.hasErrors) {
                  result.errors!.forEach((error) {
                    print('Error: ${error.message}');
                  });
                }
              },
              child: Text('Fetch User'),
            ),
          );
  }

  @override
  void dispose() {
    client?.dispose();
    super.dispose();
  }
}

运行应用：

确保你已经正确配置了GraphQL服务器地址，并且你的GraphQL查询与服务器上的模式匹配。然后运行你的Flutter应用，点击按钮应该能够执行GraphQL查询并打印用户信息。

这个示例展示了如何设置Apollo Client，使用gql_http_link进行GraphQL查询，并处理查询结果。根据你的具体需求，你可能需要调整查询、错误处理和其他配置。