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

到目前为止，我在一个_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. createApp在optimisticResponse哪里结帐id: negativeRandom()

这就是为什么我的updateprop in<Mutation />组件有一个检查 if createApp.idis a numberthen push it in the array。这意味着如果数据从本地返回，则将其推送到本地缓存中，如果从服务器返回，则不推送它。

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

我认为可能有 3 个问题 -

1. update当本地状态被推送时该函数不运行

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

3. 在__typename在optimisticResponse。Idk ifMutation是正确的值，所以我也尝试AppConnection过，但它仍然不起作用。

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

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