Flutter GraphQL集成插件nhost_gql_links的使用

Flutter GraphQL集成插件nhost_gql_links的使用

Nhost GraphQL Links

Nhost GraphQL Links 是一个用于构建与 Nhost 兼容的、库无关的 GraphQL 链接的包。这个包通常由 nhost_graphql_adapter 使用，一般情况下不建议直接使用。

开始使用

最新版本

在 pubspec.yaml 文件中添加以下依赖：

dependencies:
  nhost_gql_links: ^3.0.0

示例代码

以下是一个完整的示例，展示了如何使用 nhost_gql_links 包来创建一个 GraphQL 客户端，并查询 todos 表中的数据。这个示例假设你已经按照 Nhost 快速入门 创建了一个 todos 表。

1. 添加依赖

首先，在 pubspec.yaml 文件中添加 nhost_gql_links 和其他必要的依赖：

dependencies:
  flutter:
    sdk: flutter
  graphql: ^5.0.0
  http_link: ^2.0.0
  nhost_gql_links: ^3.0.0

2. 创建 GraphQL 客户端

接下来，创建一个 Dart 文件（例如 graphql_client.dart），并在其中配置 GraphQL 客户端：

import 'package:graphql/client.dart';
import 'package:nhost_gql_links/nhost_gql_links.dart';
import 'package:http_link/http_link.dart';

class GraphQLClientConfig {
  static final String nhostUrl = 'https://your-nhost-url'; // 替换为你的 Nhost URL

  static Link getHttpLink() {
    return HttpLink('$nhostUrl/v1/graphql');
  }

  static Link getAuthLink(String jwtToken) {
    return NhostAuthLink(
      baseUrl: nhostUrl,
      jwtToken: jwtToken,
    );
  }

  static GraphQLClient getGraphQLClient(String jwtToken) {
    final Link link = getAuthLink(jwtToken).concat(getHttpLink());

    return GraphQLClient(
      link: link,
      cache: GraphQLCache(),
    );
  }
}

3. 查询 todos 表

现在，你可以使用创建的 GraphQL 客户端来查询 todos 表。创建一个新的 Dart 文件（例如 todo_service.dart），并在其中编写查询逻辑：

import 'package:graphql/client.dart';
import 'graphql_client.dart';

class TodoService {
  final GraphQLClient _client;

  TodoService(this._client);

  Future<List<Map<String, dynamic>>> fetchTodos() async {
    final QueryOptions options = QueryOptions(
      document: gql(r'''
        query GetTodos {
          todos {
            id
            title
            is_completed
          }
        }
      '''),
    );

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

    if (result.hasException) {
      throw Exception('Failed to fetch todos: ${result.exception.toString()}');
    }

    return result.data?['todos'] as List<Map<String, dynamic>>;
  }
}

4. 在 Flutter 应用中使用

最后，在你的 Flutter 应用中使用 TodoService 来获取和显示 todos 数据。创建一个新的页面（例如 todo_page.dart），并在其中调用 fetchTodos 方法：

import 'package:flutter/material.dart';
import 'package:graphql_flutter/graphql_flutter.dart';
import 'graphql_client.dart';
import 'todo_service.dart';

class TodoPage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    final String jwtToken = 'your-jwt-token'; // 替换为你的 JWT Token
    final GraphQLClient client = GraphQLClientConfig.getGraphQLClient(jwtToken);
    final TodoService todoService = TodoService(client);

    return Scaffold(
      appBar: AppBar(
        title: Text('Todos'),
      ),
      body: FutureBuilder<List<Map<String, dynamic>>>(
        future: todoService.fetchTodos(),
        builder: (context, snapshot) {
          if (snapshot.connectionState == ConnectionState.waiting) {
            return Center(child: CircularProgressIndicator());
          } else if (snapshot.hasError) {
            return Center(child: Text('Error: ${snapshot.error}'));
          } else if (!snapshot.hasData || snapshot.data!.isEmpty) {
            return Center(child: Text('No todos found'));
          } else {
            return ListView.builder(
              itemCount: snapshot.data!.length,
              itemBuilder: (context, index) {
                final todo = snapshot.data![index];
                return ListTile(
                  title: Text(todo['title']),
                  subtitle: Text(todo['is_completed'] ? 'Completed' : 'Not Completed'),
                );
              },
            );
          }
        },
      ),
    );
  }
}