Flutter数据交互插件shelf_hasura_actions的使用

在Flutter应用中，通过shelf_hasura_actions插件可以实现与Hasura GraphQL引擎的数据交互。这个插件通常用于在后端服务（如使用Dart语言编写的Shelf服务器）中处理GraphQL请求，并将结果返回给Flutter前端。

以下是一个简单的示例，展示了如何使用shelf_hasura_actions在Dart后端处理GraphQL请求，并在Flutter前端发送这些请求。

后端（Dart/Shelf）

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

dependencies:
  shelf: ^1.0.0
  shelf_router: ^1.0.0
  shelf_hasura_actions: ^x.y.z # 请替换为最新版本号
  http: ^0.13.0

然后，创建一个Shelf服务器来处理GraphQL请求：

import 'dart:convert';
import 'package:shelf/shelf.dart';
import 'package:shelf_router/shelf_router.dart';
import 'package:shelf_hasura_actions/shelf_hasura_actions.dart';
import 'package:http/http.dart' as http;

void main() {
  var router = Router();

  // 配置Hasura GraphQL端点和管理员密钥
  var hasuraEndpoint = 'https://your-hasura-endpoint.com/v1/graphql';
  var adminSecret = 'your-admin-secret';

  // 创建一个HasuraActions实例
  var hasuraActions = HasuraActions(
    endpoint: hasuraEndpoint,
    adminSecret: adminSecret,
    httpClient: http.Client(),
  );

  // 定义一个处理GraphQL请求的处理器
  router.post('/graphql', (Request request) async {
    var body = await request.readAsString();
    var requestData = jsonDecode(body) as Map<String, dynamic>;

    try {
      var responseData = await hasuraActions.handleRequest(requestData);
      return Response.ok(jsonEncode(responseData), headers: {
        'Content-Type': 'application/json',
      });
    } catch (e) {
      return Response.internalServerError(body: jsonEncode({
        'error': e.toString(),
      }));
    }
  });

  var handler = router.handler;

  var server = await shelfListenAndServe(
    address: 'localhost',
    port: 8080,
    handler: handler,
  );

  print('Serving at http://${server.address.host}:${server.port}');
}

前端（Flutter）

在Flutter前端，你可以使用http包来发送GraphQL请求到你的Shelf服务器。

首先，在pubspec.yaml文件中添加http依赖项：

dependencies:
  flutter:
    sdk: flutter
  http: ^0.13.0

然后，创建一个函数来发送GraphQL请求：

import 'package:flutter/material.dart';
import 'dart:convert';
import 'package:http/http.dart' as http;

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  String _responseData = '';

  Future<void> _sendGraphQLRequest() async {
    var url = 'http://localhost:8080/graphql';
    var graphQLQuery = '''
      query {
        users {
          id
          name
        }
      }
    ''';

    var body = jsonEncode({
      'query': graphQLQuery,
    });

    var response = await http.post(
      Uri.parse(url),
      body: body,
      headers: {
        'Content-Type': 'application/json',
      },
    );

    if (response.statusCode == 200) {
      setState(() {
        _responseData = jsonDecode(response.body)['data']?.toString() ?? '';
      });
    } else {
      setState(() {
        _responseData = 'Error: ${response.statusCode}\n${response.body}';
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Hasura Actions Example'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text('Response Data:'),
              Text(_responseData),
              SizedBox(height: 20),
              ElevatedButton(
                onPressed: _sendGraphQLRequest,
                child: Text('Send GraphQL Request'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

这个Flutter应用包含一个按钮，点击后会向你的Shelf服务器发送一个GraphQL请求，并在屏幕上显示响应数据。

请注意，这只是一个基本示例，实际项目中你可能需要处理更多的错误情况、添加认证机制、优化性能等。