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

Question

我正在使用具有 Render Prop API 的 <Mutation /> 组件并尝试在 UI.

中执行 Optimistic Response

到目前为止，我在 _onSubmit 函数中有这个块 -

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。在 optimisticResponse 中签出 createApp，其中 id: negativeRandom()

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

但实际情况是数据仅在从服务器返回时显示。函数 update 运行s 两次，但它没有将它推入数组。

我认为可能有3个问题-

要么 update 函数在推送本地状态时不运行
我试过使 fetchPolicy 等于 cache-and-network & cache-first 但它也不起作用。
optimisticResponse中的__typename。我不知道 Mutation 是否是正确的值，所以我也尝试了 AppConnection 但它仍然不起作用。

为了简单起见，可以找到完整的代码 here. Whole code exist in one file。它是一个非常简单的应用程序，有 2 个输入和 1 个提交按钮。看起来像 -

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

Answer 1

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

您可以在 https://github.com/deadcoder0904/react-native-darkmode-list

查看完整代码

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

Apollo Optimistic UI does not work in Mutation Component?

apollo

reactjs

graphql

react-apollo

optimistic-ui

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