19

我正在使用<Mutation />具有渲染道具 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()

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

但发生的情况是数据仅在从服务器返回时显示。该函数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

4

1 回答 1

4

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

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

于 2018-07-02T20:23:36.393 回答