Apollo乐观UI在突变组件中不起作用? [英] Apollo Optimistic UI does not work in Mutation Component?

问题描述

我正在使用<Mutation />组件，该组件具有Render Prop API&尝试在用户界面中进行乐观响应.

I am using <Mutation /> component which has Render Prop API & trying to do Optimistic Response in the UI.

到目前为止，我在_onSubmit函数中拥有此块-

So far I have this chunk in an _onSubmit function -

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>

我知道<Mutation />中的update函数运行两次，一次是optimisticResponse运行时&服务器响应第二次返回.

I know that update function in <Mutation /> runs twice, once when optimisticResponse is ran & second time when server response comes back.

我第一次给他们id作为number.在optimisticResponse中检出createApp，其中id: negativeRandom()

On the first time, I give them id as a number. Checkout createApp in optimisticResponse where id: negativeRandom()

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

That's why my update prop in <Mutation /> component has a check if createApp.id is a number then push it in the array. It means that if data returned from local then push it in local cache & if returned from server don't push it.

但是发生的是只有从服务器返回时才显示数据.函数update运行两次，但不会将其压入数组.

But what happens is the data is only showed when returned from the server. The function update runs twice but it does not push it in the array.

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

I think there might 3 problems -

1. 在推送本地状态时，update函数均未运行

我尝试使fetchPolicy等于cache-and-network& cache-first，但是它也不起作用.

I've tried making fetchPolicy equal to cache-and-network & cache-first but it didn't work too.

optimisticResponse中的__typename.如果Mutation是正确的值，则为idd，所以我也尝试了AppConnection，但它仍然不起作用.

The __typename in optimisticResponse. Idk if Mutation is the correct value, so I tried AppConnection too but it still does not work.

完整的代码可以在此处找到.为了简单起见，整个代码位于一个文件中.它是一个非常简单的应用，具有2个输入& 1个提交按钮.看起来像-

The complete code can be found here. Whole code exist in one file for simplicity. Its a very simple app which has 2 inputs & 1 submit button. It looks like -

推荐答案

显然，这是Apollo或React Apollo软件包中的错误.不知道是哪个bug还是仅适用于React Native，但我只是更新了我的依赖项&解决了它而无需更改任何代码

Apparently this was a bug in Apollo or React Apollo package. Don't know which bug or was it just for React Native but I just updated my dependencies & solved it without changing any code

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

这篇关于Apollo乐观UI在突变组件中不起作用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！