为重新排序的连接创建乐观响应

在我的用户界面中，我允许我的用户“交换”两个项目，但在这个项目周围创建变化有点棘手。

我现在正在做的是天真的方式，即使用FIELDS_CHANGE来改变我的节点本身。

它的工作原理，但问题是我似乎无法为它写一个乐观的更新。我能够将一个ID列表传递给我的graphql服务器，但这对于乐观更新不起作用，因为它期望实际的数据。

所以我想我必须嘲笑我的'连接'界面，但不幸的是，它仍然无法正常工作。我'复制'我的重新排序节点getOptimisticResponse，但它似乎被忽略。数据与实际的服务器响应相匹配。（IDS简体）

原：

{ 
    item: { 
    edges: { 
     {cursor: 1, node: {id:2}} 
     {cursor: 2, node: {id:1}} 
    } 
    } 
}

（什么都不做）：乐观的回复：

{ 
    item: { 
    edges: { 
     node: {id:1} 
     node: {id:2} 
    } 
    } 
}

服务器的回复：

{ 
    item: { 
    edges: { 
     {cursor: 1, node: {id:1}} 
     {cursor: 2, node: {id:2}} 
    } 
    } 
}

是怎么回事？它是等价的（除了游标），即使我添加了游标，它仍然不起作用。

我在做什么错？还有一种更简单的方法来模拟我的ID到连接？

另外，有没有办法让这些数据零碎？现在，重新排序两个项目重新请求整个列表，因为我的突变配置。我想我可以用RANGE_ADD和RANGE_DELETE来做'模拟交换'，但是有没有更简单的方法来做到这一点？

来源

2016-05-16 Secret

由于您在响应用户重新排序项目时触发了突变，因此我假设您存储了服务器端项目的位置或顺序。对于你正在做的事情，创建乐观响应的一种方法可以是使用该信息的position或order信息。在服务器端，项目需要提供附加字段position。在客户端，显示的项目按position排序。

当用户交换两个项目时，在客户端突变的乐观响应中，您只需交换这两个项目的position字段。这同样适用于服务器端的变异。

乐观响应代码可以是这样的：

getOptimisticResponse() { 
    return { 
    item1: { 
     id: this.props.item1.id, 
     position: this.props.item2.position, 
    }, 
    item2: { 
     id: this.props.item2.id, 
     position: this.props.item1.position, 
    }, 
    }; 
}

来源

2016-05-16 05:50:31

为重新排序的连接创建乐观响应

回答

相关问题