Apollo Optimistic UI在Mutation Component中不起作用?

dea*_*904 19 apollo reactjs graphql react-apollo optimistic-ui

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

到目前为止,我在_onSubmit功能中有这个块-

createApp({
    variables: { id: uuid(), name, link },
    optimisticResponse: {
        __typename: "Mutation",
        createApp: {
            __typename: "App",
            id: negativeRandom(),
            name,
            link
        }
    }
});
Run Code Online (Sandbox Code Playgroud)

我的<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>
Run Code Online (Sandbox Code Playgroud)

我知道该update函数在<Mutation />运行两次,一次optimisticResponse运行时和第二次运行时服务器响应.

在第一次,我给他们id作为一个number.结帐createAppoptimisticResponse哪里id: negativeRandom()

这就是为什么我update<Mutation />组件中的prop 有一个检查是否createApp.idnumber然后将它推入数组中.这意味着如果从本地返回数据然后将其推送到本地缓存中,并且如果从服务器返回,则不推送它.

但是,只有从服务器返回时才会显示数据.该函数update运行两次,但不会将其推入数组中.

我想可能有3个问题 -

  1. update按下本地状态时,该功能不会运行

  2. 我已经尝试过fetchPolicy等于cache-and-network&cache-first但它也没有用.

  3. __typenameoptimisticResponse.Idk如果Mutation是正确的值,所以我也尝试AppConnection了但它仍然不起作用.

完整的代码可以在这里找到.为简单起见,整个代码存在于一个文件中 它是一个非常简单的应用程序,有2个输入和1个提交按钮.看起来像 -

黑暗模式列表应用程序

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

dea*_*904 4

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

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