标签: optimistic-ui

我正在使用<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 …

我希望能够在对象仍在创建时对其进行更新。

例如：假设我有一个待办事项列表，我可以在其中添加带有名称的项目。我还希望能够编辑项目的名称。

现在假设连接速度较慢的用户创建了一个项目。在这种情况下，我会触发一个创建项目突变并乐观地更新我的 UI。这很好用。目前没有问题

现在假设由于网络缓慢，创建项目突变需要一些时间。在那个时候，用户决定编辑他们刚刚创建的项目的名称。对于理想的体验：

1. UI 应立即更新为新名称
2. 新名称最终应该保留在服务器中

我可以通过等待创建变更完成（这样我可以获得项目 ID）来实现 #2，然后进行更新名称变更。但这意味着我的 UI 的一部分将保持不变，直到创建项目突变返回并且更新名称突变的乐观响应开始。这意味着 #1 不会实现。

所以我想知道如何使用 Apollo 客户端同时实现 #1 和 #2。

注意：我不想添加微调器或禁用编辑。我希望应用程序即使在连接速度较慢的情况下也能做出响应。

我正在尝试创建一个乐观的响应，其中 ui 会通过拖放数据立即更新（最小延迟和更好的用户体验）。然而，我遇到的问题是它无论如何都会滞后。

所以发生的事情是我希望从我的查询中得到一个区域和未分配区域的列表，unassignedZone 是一个对象，其中包含城市，区域是一个区域列表，其中包含城市。在编写我的突变时，我会在拖放它们后返回重新排序的新区域列表。重新排序是由名为“DisplayOrder”的区域对象上的字段完成的。逻辑是正确设置数字。问题是，当我尝试用乐观的 ui 和更新来模仿它时，会有一点延迟，就像它仍在等待网络一样。

我试图实现的大部分内容都发生在 onDragEnd = () => { ... } 函数中。

import React, { Component } from "react";
import { graphql, compose, withApollo } from "react-apollo";
import gql from "graphql-tag";
import { withState } from "recompose";
import { withStyles } from "@material-ui/core/styles";
import Select from "@material-ui/core/Select";
import MenuItem from "@material-ui/core/MenuItem";
import Input from "@material-ui/core/Input";
import Grid from "@material-ui/core/Grid";
import InputLabel from "@material-ui/core/InputLabel";
import Tabs from "@material-ui/core/Tabs";
import Tab from "@material-ui/core/Tab";
import AppBar from "@material-ui/core/AppBar";
import …

当我在客户端和服务器上执行Meteor.call而不是直接收集操作时.它是否会删除乐观的UI更改,即最小化更改,只是直接更改服务器并在更新UI之前等待服务器上的更新？

使用带有订阅的乐观UI是否有意义？

所以基本上：

addChannelMutation({
  variables: { name: eventValue },
  optimisticResponse: {
    __typename: "Mutation",
    addChannel: {
      __typename: "Channel",
      id: data.channels.length,
      name: eventValue
    }
  },
  update: (store, { data: { addChannel } }) => {
    // Read the data from our cache for this query.
    const data = store.readQuery({ query: channelsListQuery });
    // Add our comment from the mutation to the end.
    data.channels.push(addChannel);
    // Write our data back to the cache.
    store.writeQuery({ query: channelsListQuery, data });
  }
}).then(res => {});

它将同一项添加两次，触发重复的密钥异常。因此，乐观的ui对于订阅是否有意义？