Amplify Data Store、App Sync 和移动应用程序之间的数据同步

问题描述 投票:0回答:0

当我们使用 Amplify Datastore 时,我们有多种方法来访问数据。我用了其中三个:

  1. Lambda 函数调用 App Sync API 来创建一个新的“Post”突变
  2. 移动应用程序 (Flutter) 调用 Datastore.save() 方法
  3. 我在 Amplify 控制台上手动创建/监控数据。

我可以看到数据在 Amplify 控制台和移动应用程序之间同步。创建/删除正确传播。

但是,当我使用 App Sync API 使用 Lambda 函数创建记录时,我需要刷新移动应用程序以及 Amplify 控制台。我知道直接将记录添加到 dynamodb 表是行不通的。但是,根据文档,应该将使用应用程序同步的突变传播到客户端。

这需要任何额外的配置吗?我如何实现这个 lambda 函数的用例,创建要在移动应用程序上实时显示的数据? Amplify 控制台和移动应用程序之间的同步非常完美,所以我相信问题出在我的 AWS 配置中,而不是 Flutter 代码。

使用 App Sync 创建记录的 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());
                    }
                  },
                ),
              )

flutter graphql aws-amplify serverless aws-appsync
© www.soinside.com 2019 - 2024. All rights reserved.