Flutter AWS AppSync API集成插件aws_appsync_api的使用

Flutter AWS AppSync API 集成插件 aws_appsync_api 的使用

生成的 Dart 库来自 API 规范

关于服务：

AWS AppSync 提供了用于通过 GraphQL 从您的应用程序创建和与数据源交互的 API 动作。

链接

• 其他 AWS 库
• 问题跟踪器
• AWS API 定义

示例代码

import 'package:aws_appsync_api/appsync-2017-07-25.dart';

void main() {
  // 初始化 AppSync 客户端，指定区域为 eu-west-1
  final service = AppSync(region: 'eu-west-1');
}

有关如何使用 AppSync 的详细信息，请参阅 API 参考文档。

完整示例 Demo

以下是一个完整的示例，展示了如何在 Flutter 中初始化并使用 aws_appsync_api 插件来与 AWS AppSync 进行交互。

import 'package:flutter/material.dart';
import 'package:aws_appsync_api/appsync-2017-07-25.dart'; // 导入 AWS AppSync 插件

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter AWS AppSync Demo',
      home: MyHomePage(title: 'Flutter AWS AppSync'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final service = AppSync(region: 'eu-west-1'); // 初始化 AppSync 客户端

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text('You have pushed the button this many times:'),
            FutureBuilder(
              future: fetchData(), // 异步调用 fetchData 方法
              builder: (context, snapshot) {
                if (snapshot.hasData) {
                  return Text(snapshot.data);
                } else if (snapshot.hasError) {
                  return Text("${snapshot.error}");
                }

                // 由父构件决定是否显示进度指示器
                return CircularProgressIndicator();
              },
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          setState(() {
            fetchData(); // 每次按下按钮时重新获取数据
          });
        },
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }

  // 定义一个异步方法 fetchData 来获取数据
  Future<String> fetchData() async {
    try {
      // 使用 AppSync 客户端执行查询
      final result = await service.query(
        QueryOptions(
          document: gql('''
            query GetItem {
              getItem(id: "1") {
                id
                name
              }
            }
          '''),
        ),
      );

      // 返回查询结果中的数据
      return result.data['getItem']['name'];
    } catch (e) {
      // 捕获并返回错误信息
      return e.toString();
    }
  }
}