reactjs - Apollo Optimistic UI 在 Mutation 组件中不起作用？

Question

我正在使用<Mutation />具有 Render Prop API 并尝试在 UI 中执行乐观响应的组件。

到目前为止，我在 _onSubmit 中有这个 block 功能-

createApp({
    variables: { id: uuid(), name, link },
    optimisticResponse: {
        __typename: "Mutation",
        createApp: {
            __typename: "App",
            id: negativeRandom(),
            name,
            link
        }
    }
});

还有我的<Mutation />组件看起来像 -

<Mutation
    mutation={CREATE_APP}
    update={(cache, { data: { createApp } }) => {
        const data = cache.readQuery({ query: LIST_APPS });
        if (typeof createApp.id == "number") {
            data.listApps.items.push(createApp);
            cache.writeQuery({
                query: LIST_APPS,
                data
            });
        }
    }}
>

{/* 
some code here
*/}

</Mutation>

我知道update函数位于 <Mutation />运行两次，一次在 optimisticResponse 时运行当服务器响应返回时第二次运行。

第一次，我给他们 id作为number 。结账createApp在optimisticResponse哪里id: negativeRandom()

这就是为什么我的 update支持<Mutation />组件检查是否 createApp.id是 number然后将其插入数组中。这意味着如果数据从本地返回，则将其推送到本地缓存中，如果从服务器返回，则不推送它。

但是发生的情况是数据仅在从服务器返回时显示。函数update运行两次，但它不会将其插入数组中。

我认为可能存在 3 个问题 -

1. 要么 update推送本地状态时函数不会运行

2. 我尝试过制作 fetchPolicy等于 cache-and-network & cache-first但它也不起作用。

3. __typename在optimisticResponse 。我不知道如果Mutation是正确的值，所以我尝试了 AppConnection也一样，但还是不行。

完整代码可见here 。整个代码存在于one file中为了简单起见。它是一个非常简单的应用程序，有 2 个输入和 1 个提交按钮。看起来像 -

注意:同样的事情也适用于 React。这是 React Repo 的链接 - https://github.com/deadcoder0904/react-darkmodelist

Answer 1

显然这是 Apollo 或 React Apollo 包中的一个错误。不知道哪个错误或者只是针对 React Native，但我只是更新了我的依赖项并在不更改任何代码的情况下解决了它

您可以在 https://github.com/deadcoder0904/react-native-darkmode-list 查看完整代码