具有 OptimisticResponse 的突变不包括第二次更新中的服务器响应数据

Posted 2023-03-08

【中文标题】具有 OptimisticResponse 的突变不包括第二次更新中的服务器响应数据

【英文标题】：Mutation with OptimisticResponse doesn't include server response data in second Update

【发布时间】：2018-08-04 06:06:14

【问题描述】：

与here 的问题类似，我发现当使用optimisticResponse 和update 进行突变时，服务器响应中设置的id 是错误的。此外，id 实际上是通过再次运行乐观函数来设置的。

在下面的突变中，refetchQueries 被故意注释掉。我不想用那个。我只想通过 update 来管理一切。

还要注意，optimisticResponse id 前面有一个“-”，以证明乐观函数运行了两次：

id: "-" _ uuid(),

变异

graphql(MutationCreateChild, 
    options: 
      // refetchQueries: [QueryAllChildren, variables: limit: 1000],
      update: (proxy, data: createChild) => 
        const query = QueryAllChildren;
        const data = proxy.readQuery(query);

        data.listChildren.items.push(createChild);
        proxy.writeQuery(query, data);

        console.log("id: ", createChild.id);
      
    ,
    props: props => (
      createChild: child => 
        return props.mutate(
          variables: child,
          optimisticResponse: () => (
            createChild: 
              ...child,
              id: "-" + uuid(),
              __typename: "Child"
            
          )
        );
      
    )
  )

console.log 语句的输出是：

id:  -6c5c2a28-8bc1-49fe-92e1-2abade0d06ca
id:  -9e0a1c9f-d9ca-4e72-88c2-064f7cc8684e

虽然 chrome 开发者控制台中的实际请求如下所示：

"data":"createChild":"id":"f5bd1c27-2a21-40c6-9da2-9ddc5f05fd40",__typename":"Child"

这是一个错误还是我在更新功能中没有正确访问 id？

【参考方案1】：

这是一个已知问题，现已修复。我想它很快就会发布到 npm 注册表中。

https://github.com/awslabs/aws-mobile-appsync-sdk-js/pull/43

https://github.com/awslabs/aws-mobile-appsync-sdk-js/commit/d26ea1ca1a8253df11dea8f11c1749e7bad8ef05

【讨论】：

关闭并合并：github.com/awslabs/aws-mobile-appsync-sdk-js/issues/56

【参考方案2】：

使用您的设置，我相信更新函数被调用两次是正常的，并且您是正确的，来自服务器的真实 ID 只会在第二次出现。 Apollo 获取您从 optimisticResponse 返回的对象并将其传递给更新函数，以便您的 UI 可以立即显示更改而无需等待服务器。当服务器响应返回时，更新函数会以相同的状态（即没有乐观结果的状态）再次调用，您可以在其中重新应用来自服务器的正确值的更改。

至于为什么你用'-'列出的第二个id与你在chrome dev控制台中看到的id不一样，我不确定。您确定确实是该请求与对 console.log 的调用相匹配吗？

【讨论】：

感谢您的解释，是的，您所描述的正是我所期望的。问题是对更新函数的第二次调用实际上并不包括来自服务器的响应，而是在乐观响应中创建的同一个对象。我可以确认是这种情况，因为执行“更新突变”而不是“创建突变”的工作方式相同。 “创建突变”中 id 不同的原因是第二次调用了 uuid() 函数。