Apollo mutate 为单个突变调用四次更新

Question

每次我在我的应用程序中添加一个新项目时，突变都会调用 update() 四次次，出于某种原因。前两个是乐观数据，第二批中，一个是乐观的，一个是来自网络的真实数据。我无法理解这一点。正在创建的新项目在页面上显示两次。

这是我的突变：

mutation CreateTrack($name: String!, $trackNum: Int, $s3Key: String!) {
  createTrack(name: $name, trackNum: $trackNum, s3Key: $s3Key) {
    trackId
    name
    createdAt
    duration
    trackNum
    s3Key
    isProcessing
    didProcessingFail
  }
}

这是突变代码：

createTrack({ name, s3Key }) {
  const newTrack = {
    name,
    s3Key,
  };

  this.$apollo
    .mutate({
      mutation: createTrackMutation,
      variables: newTrack,
      update: (store, { data: { createTrack } }) => {
        console.log('this is dumb', JSON.stringify(createTrack, null, 2));
        const variables = {
          limit: this.pageSize,
          order: this.order === 'ascending' ? 'asc' : 'desc',
          sortBy: this.sortBy,
        };
        const data = store.readQuery({
          query: listTracksQuery,
          variables,
        });
        data.listTracks.items.push(createTrack);
        store.writeQuery({
          query: listTracksQuery,
          variables,
          data,
        });
      },
      optimisticResponse: {
        __typename: 'Mutation',
        createTrack: {
          __typename: 'Track',
          ...newTrack,
          trackId: '??',
          createdAt: new Date().toISOString(),
          isProcessing: true,
          didProcessingFail: false,
          duration: null,
          trackNum: 999,
        },
      },
    })
    .then(data => {
      console.log('done!', data);
    })
    .catch(err => {
      console.log('error', err);
    });
},

最后，这里是调用 mutate once 的控制台日志：

this is dumb {
  "__typename": "Track",
  "name": "small2.wav",
  "s3Key": "staging/audio/10e3e675-e7a6-41dc-a8fb-686ad683e40e.wav",
  "trackId": "??",
  "createdAt": "2018-03-05T03:30:18.246Z",
  "isProcessing": true,
  "didProcessingFail": false,
  "duration": null,
  "trackNum": 999
}

this is dumb {
  "__typename": "Track",
  "name": "small2.wav",
  "s3Key": "staging/audio/10e3e675-e7a6-41dc-a8fb-686ad683e40e.wav",
  "trackId": "??",
  "createdAt": "2018-03-05T03:30:18.246Z",
  "isProcessing": true,
  "didProcessingFail": false,
  "duration": null,
  "trackNum": 999
}

done! {data: {...}}

this is dumb {
  "__typename": "Track",
  "name": "small2.wav",
  "s3Key": "staging/audio/10e3e675-e7a6-41dc-a8fb-686ad683e40e.wav",
  "trackId": "??",
  "createdAt": "2018-03-05T03:30:18.246Z",
  "isProcessing": true,
  "didProcessingFail": false,
  "duration": null,
  "trackNum": 999
}

this is dumb {
  "trackId": "2b3de8ac-d145-4da6-b522-27e5413d43e1",
  "name": "small2.wav",
  "createdAt": "2018-03-05T03:30:18.627Z",
  "duration": null,
  "trackNum": 999,
  "s3Key": "staging/audio/10e3e675-e7a6-41dc-a8fb-686ad683e40e.wav",
  "isProcessing": true,
  "didProcessingFail": null,
  "__typename": "Track"
}

我做错了什么？

Answer 1

我刚刚与处理此代码的工程师聊过这个问题。您看到的是 AWS AppSync SDK 进程在幕后使用的簿记进程，以确保数据完整性。它 NOT 实际上运行是针对你 API 的 4 次突变。

当 AppSync 客户端获得乐观响应时，更新功能运行两次 - 一次用于本地响应，一次用于网络响应。这是标准的 Apollo 行为。 AppSync 客户端在幕后所做的是第一个乐观响应，我们将其视为网络响应并将数据存储在持久存储介质（Web 的本地存储，React Native 的异步存储）中以允许乐观 UI处于离线状态时。这本质上是一个 "outbox"，数据在离线时首先被写入（当前实现使用 Redux Offline），如果您使用 disableOffline:true 禁用离线，您将不再看到此行为。

当您重新上线时，同步过程开始执行，您会看到客户端向服务器发送的另一条变异消息（实际上是原始变异）以及相应的响应。

请注意，如果您在客户端的乐观响应中创建唯一 ID，并且还在服务器上创建唯一 ID，例如使用 $util.autoId()，那么您可能会有重复的记录，因为我们不会覆盖任何记录您已明确分配 ID 的本地数据。如果您愿意，可以使用 Offline-enabled put item 和 Offline-enabled response[=27 使任何 locally-created ID 失效=] AppSync 的 DynamoDB 解析器中的模板，它使用名为 relayState 的临时键（您需要将其添加为正在创建的类型的字段），您可以使用它来跟踪本地 ID 和匹配它与在服务器上创建的 ID 一致。

我们将在未来对这个簿记过程进行更多补充，欢迎在我们的 GitHub 问题回购中提出建议：https://github.com/awslabs/aws-mobile-appsync-sdk-js/issues

Apollo mutate 为单个突变调用四次更新

Apollo mutate calling update four times for a single mutation

apollo

apollo-client

vue-apollo

aws-appsync