Amplify DataStore、AppSync与Flutter应用数据同步问题排查

我用三种方式操作Amplify的Post数据：

• 通过Lambda函数调用AppSync API执行创建Post的mutation
• Flutter移动端调用DataStore.save()方法
• 在Amplify控制台手动创建/监控数据

目前控制台和Flutter应用间的数据同步完全正常，增删操作能实时同步，但Lambda创建的记录，必须手动刷新移动端和控制台才会显示。根据文档，AppSync的mutation应该能自动同步到客户端，请问是否需要额外配置？怎么让Lambda创建的数据实时显示在移动端？因为控制台和应用同步正常，我认为问题出在AWS配置而非Flutter代码。

Lambda创建记录的代码 #

/* Amplify Params - DO NOT EDIT
    API_ANANTA_GRAPHQLAPIENDPOINTOUTPUT
    API_ANANTA_GRAPHQLAPIIDOUTPUT
    API_ANANTA_GRAPHQLAPIKEYOUTPUT
    ENV
    REGION
Amplify Params - DO NOT EDIT */

import { default as fetch, Request } from "node-fetch";

const GRAPHQL_ENDPOINT = process.env.API_ANANTA_GRAPHQLAPIENDPOINTOUTPUT;
const GRAPHQL_API_KEY = process.env.API_ANANTA_GRAPHQLAPIKEYOUTPUT;

const query = /* GraphQL */ `
  mutation CREATE_POST($input: CreatePostInput!) {
    createPost(input: $input) {
      id
    }
  }
`;

/**
 * @type {import('@types/aws-lambda').APIGatewayProxyHandler}
 */
export const handler = async (event) => {
  console.log(`EVENT: ${JSON.stringify(event)}`);

  const variables = {
    input: {
      title: "Lorem ipsum dolor sit amet"
    },
  };

  /** @type {import('node-fetch').RequestInit} */
  const options = {
    method: "POST",
    headers: {
      "x-api-key": GRAPHQL_API_KEY,
      "Content-Type": "application/json",
    },
    body: JSON.stringify({ query, variables }),
  };

  const request = new Request(GRAPHQL_ENDPOINT, options);

  let statusCode = 200;
  let body;
  let response;

  try {
    response = await fetch(request);
    body = await response.json();
    if (body.errors) statusCode = 400;
  } catch (error) {
    statusCode = 400;
    body = {
      errors: [
        {
          status: response.status,
          message: error.message,
          stack: error.stack,
        },
      ],
    };
  }

  return {
    statusCode,
    body: JSON.stringify(body),
  };
};

Flutter展示数据的代码 #

Expanded(
  child: StreamBuilder<QuerySnapshot<Post>>(
    stream: Amplify.DataStore.observeQuery(
      Post.classType,
    ),
    builder: (context, snapshot) {
      if (snapshot.hasData) {
        final posts = snapshot.data!.items;
        return ListView.builder(
          itemCount: posts.length,
          itemBuilder: (context, index) {
            final post = posts[index];
            return ListTile(
              title: Text(post.title),
              subtitle: Text(post.description),
            );
          },
        );
      } else {
        return const Center(child: CircularProgressIndicator());
      }
    },
  ),
)

解决方案 #

1. 补充Mutation返回的同步字段 #

DataStore依赖AppSync自动生成的_version、_lastChangedAt、_deleted字段实现实时同步，你的Lambda mutation仅返回id，导致DataStore无法识别新记录。修改mutation如下：

mutation CREATE_POST($input: CreatePostInput!) {
  createPost(input: $input) {
    id
    title
    _version
    _lastChangedAt
    _deleted
  }
}

2. 确认AppSync订阅触发与权限 #

• 进入Amplify控制台的AppSync API页面，找到Post类型的createPost mutation，确保已启用触发订阅选项
• 检查OnCreatePost订阅的权限规则，允许API Key认证的客户端接收推送（若继续使用API Key）

3. 改用IAM认证调用AppSync（推荐） #

Lambda作为AWS服务，使用IAM角色认证比API Key更可靠，能确保同步事件正确传递：

• 给Lambda执行角色添加AppSyncInvokeFullAccess权限（或更精细的自定义权限）
• 修改Lambda代码，使用AWS签名认证请求，示例如下：

import { AppSyncClient, AUTH_TYPE } from 'aws-appsync';
import aws from 'aws-sdk';

const client = new AppSyncClient({
  url: process.env.API_ANANTA_GRAPHQLAPIENDPOINTOUTPUT,
  region: process.env.REGION,
  auth: {
    type: AUTH_TYPE.AWS_IAM,
    credentials: aws.config.credentials,
  },
});

const query = /* GraphQL */ `
  mutation CREATE_POST($input: CreatePostInput!) {
    createPost(input: $input) {
      id
      title
      _version
      _lastChangedAt
      _deleted
    }
  }
`;

export const handler = async (event) => {
  try {
    const result = await client.mutate({
      mutation: query,
      variables: {
        input: {
          title: "Lorem ipsum dolor sit amet"
        }
      }
    });
    return {
      statusCode: 200,
      body: JSON.stringify(result)
    };
  } catch (error) {
    return {
      statusCode: 400,
      body: JSON.stringify({ errors: [error.message] })
    };
  }
};

4. 验证DataStore监听配置 #

Flutter端的observeQuery代码是正确的，若仍有问题，可确认DataStore初始化时已启用同步，并检查设备网络连接是否稳定。

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