如何使用Flutter Amplify访问AWS AppSync服务？

前置准备 #

• 已部署完成的AWS AppSync GraphQL API端点、授权模式（API密钥/Cognito/IAM等）对应鉴权信息
• Flutter 2.0+ 开发环境
• 现有项目可正常编译运行

步骤1：安装依赖 #

在项目pubspec.yaml中添加对应依赖：

dependencies:
  flutter:
    sdk: flutter
  amplify_flutter: ^1.0.0 # 替换为当前最新稳定版
  amplify_api: ^1.0.0 # 替换为当前最新稳定版

添加完成后执行flutter pub get完成依赖安装。

步骤2：配置Amplify #

你已经有部署完成的AppSync API，无需重新通过Amplify CLI推送资源，直接将已有的amplifyconfiguration.dart配置文件放入项目lib目录下即可。
在应用初始化阶段完成Amplify配置，参考main.dart代码：

import 'package:flutter/material.dart';
import 'package:amplify_flutter/amplify_flutter.dart';
import 'package:amplify_api/amplify_api.dart';
import 'amplifyconfiguration.dart';

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();
  // 注册API插件
  await Amplify.addPlugin(AmplifyAPI());
  // 加载配置
  try {
    await Amplify.configure(amplifyconfig);
  } on AmplifyAlreadyConfiguredException {
    safePrint("Amplify已完成配置，无需重复初始化");
  }
  runApp(const MyApp());
}

如果你的API使用Cognito用户池、IAM等非API密钥授权模式，需要先完成对应Auth插件的配置和用户登录流程，再发起API请求，否则会返回权限错误。

步骤3：实现GraphQL请求 #

查询（Query）示例 #

Future<void> fetchData() async {
  try {
    // 替换为你自己业务对应的查询语句
    const query = '''
      query ListItems {
        listItems {
          items {
            id
            name
            createTime
          }
        }
      }
    ''';
    final request = GraphQLRequest<String>(document: query);
    final response = await Amplify.API.query(request: request).response;
    if (response.data != null) {
      safePrint("查询成功，返回数据：${response.data}");
      // 此处可将返回JSON转换为Dart实体类处理
    } else {
      safePrint("查询错误：${response.errors}");
    }
  } catch (e) {
    safePrint("请求异常：$e");
  }
}

变更（Mutation）示例 #

Future<void> createItem(String name) async {
  try {
    // 替换为你自己业务对应的变更语句
    const mutation = '''
      mutation CreateItem(\$name: String!) {
        createItem(input: {name: \$name}) {
          id
          name
          createTime
        }
      }
    ''';
    final request = GraphQLRequest<String>(
      document: mutation,
      variables: {'name': name},
    );
    final response = await Amplify.API.mutate(request: request).response;
    if (response.data != null) {
      safePrint("创建成功，返回数据：${response.data}");
    } else {
      safePrint("创建错误：${response.errors}");
    }
  } catch (e) {
    safePrint("请求异常：$e");
  }
}

订阅（Subscription）示例 #

如果你的API开启了实时推送能力，可通过订阅接收实时通知：

StreamSubscription<GraphQLResponse<String>>? subscription;

void listenItemCreate() {
  // 替换为你自己业务对应的订阅语句
  const subscriptionDoc = '''
    subscription OnCreateItem {
      onCreateItem {
        id
        name
        createTime
      }
    }
  ''';
  final request = GraphQLRequest<String>(document: subscriptionDoc);
  subscription = Amplify.API.subscribe(request: request).listen(
    (event) {
      if (event.data != null) {
        safePrint("收到实时推送：${event.data}");
      }
    },
    onError: (e) => safePrint("订阅异常：$e"),
  );
}

// 页面销毁/不需要订阅时记得取消
@override
void dispose() {
  subscription?.cancel();
  super.dispose();
}

优化提示 #

如果你的GraphQL Schema结构复杂，可通过Amplify CLI的amplify codegen models命令自动生成对应Dart实体类，无需手动编写JSON解析逻辑。

内容的提问来源于stack exchange，提问作者WakkaoW