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

问题描述

我正在使用 组件，它具有 Render Prop API &尝试在 UI 中进行乐观响应.

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

createApp({变量:{ id: uuid(), name, link },乐观响应:{__typename: "突变",创建应用程序:{__typename: "应用程序",id:negativeRandom(),姓名，关联}}});

我的 组件看起来像 -

{const data = cache.readQuery({ 查询:LIST_APPS });if (typeof createApp.id == "number") {data.listApps.items.push(createApp);cache.writeQuery({查询:LIST_APPS，数据});}}}>{/*这里有一些代码*/}</突变>

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

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

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

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

我认为可能有 3 个问题 -

1. 要么update函数在推送本地状态时没有运行

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

3. optimisticResponse 中的 __typename.我知道 Mutation 是否是正确的值，所以我也尝试了 AppConnection 但它仍然不起作用.

可以在

解决方案

显然这是 Apollo 或 React Apollo 包中的一个错误.不知道是哪个错误还是仅针对 React Native，但我刚刚更新了我的依赖项 &不用修改任何代码就解决了

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

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

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
        }
    }
});

And my <Mutation /> component looks like -

<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>

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

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

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.

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.

I think there might 3 problems -

1. Either the update function does not run when local state is pushed

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

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

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 -

Note: Same thing works with React. Here's a link to React Repo - https://github.com/deadcoder0904/react-darkmodelist

解决方案

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

You can check out the full code at https://github.com/deadcoder0904/react-native-darkmode-list

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