Flutter GraphQL数据请求插件nhost_graphql_adapter的使用

Nhost GraphQL Adapter for Dart

Nhost 与 graphql 包集成，允许开发者在Flutter和Dart项目中轻松进行GraphQL数据请求。如果你正在为Flutter开发应用程序，可以考虑使用nhost_flutter_graphql，它提供了与graphql_flutter配合良好的小部件。

Getting Started

最新版本安装

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

dependencies:
  nhost_graphql_adapter: ^3.0.0

然后执行flutter pub get以安装最新版本。

示例代码

Todo 示例

下面是一个简单的Todo应用示例，它查询了Nhost Quick Start创建的todos表。这个例子展示了如何使用nhost_graphql_adapter来获取、创建、更新和删除Todo条目。

首先，确保你已经在Nhost控制台创建了一个todos表，并且已经设置了正确的权限。

接下来，在你的Flutter项目中，你可以创建一个名为main.dart的文件，内容如下：

import 'package:flutter/material.dart';
import 'package:nhost_graphql_adapter/nhost_graphql_adapter.dart';
import 'package:graphql_flutter/graphql_flutter.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await initHiveForFlutter();

  final HttpLink httpLink = HttpLink('https://your-subdomain.nhost.run/v1/graphql');
  
  final NhostAuthLink authLink = NhostAuthLink(
    subdomain: 'your-subdomain',
    region: 'your-region',
  );

  final Link link = authLink.concat(httpLink);

  ValueNotifier<GraphQLClient> client = ValueNotifier(
    GraphQLClient(
      link: link,
      cache: GraphQLCache(store: HiveStore()),
    ),
  );

  runApp(MyApp(client: client));
}

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

  MyApp({required this.client});

  @override
  Widget build(BuildContext context) {
    return GraphQLProvider(
      client: client,
      child: MaterialApp(
        title: 'Nhost GraphQL Adapter Demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: TodosScreen(),
      ),
    );
  }
}

class TodosScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Todos'),
      ),
      body: Query(
        options: QueryOptions(
          document: gql(r'''
            query GetTodos {
              todos {
                id
                text
                completed
              }
            }
          '''),
        ),
        builder: (QueryResult result, {VoidCallback? refetch, FetchMore? fetchMore}) {
          if (result.hasException) {
            return Text(result.exception.toString());
          }

          if (result.isLoading) {
            return Center(child: CircularProgressIndicator());
          }

          List todos = result.data?['todos'] ?? [];

          return ListView.builder(
            itemCount: todos.length,
            itemBuilder: (context, index) {
              final todo = todos[index];
              return ListTile(
                title: Text(todo['text']),
                trailing: Checkbox(
                  value: todo['completed'],
                  onChanged: (bool? value) {
                    // Update the todo's completion status here
                  },
                ),
              );
            },
          );
        },
      ),
    );
  }
}

请记得替换your-subdomain和your-region为你自己的Nhost子域名和地区。

Links 示例

此外，还有另一个示例展示了如何通过组合自定义Link与本包提供的Link来创建一个GraphQLClient。这通常用于需要自定义网络请求或添加额外逻辑（如重试机制）的情况。详情可以参考Nhost官方仓库中的Links example。

以上就是关于nhost_graphql_adapter的基本介绍及使用方法。希望这些信息对你有所帮助！如果有任何问题或者需要进一步的帮助，请随时提问。