Relay Modern：在optimisticUpdater中删除记录

Posted 2023-03-08

【中文标题】Relay Modern：在optimisticUpdater中删除记录

【英文标题】：Relay Modern: delete record in optimisticUpdater

【发布时间】：2019-09-23 21:36:12

【问题描述】：

在我的应用程序中，我有一个mutation，我想在其中使用optimisticUpdater 在服务器响应之前更新视图。为此，我需要将列表中的一些记录删除到中继存储中，如下所示：

optimisticUpdater: storeProxy => 
  storeProxy.delete(recordDataID)

问题是中继不会删除记录，但它会转换null 中的记录。 这可能很烦人，因为我每次在我的应用程序中使用它时都必须过滤列表。

有人知道我如何删除记录吗？ 谢谢

【参考方案1】：

如果您使用@connection 装饰您的查询，那么您可以使用ConnectionHandler 轻松删除记录：

const query = graphql`query WidgetListQuery 
    widgets(first: 10) @connection(key: "WidgetList_widgets") 
        ...
    
`

optimisticUpdater(store) 
    const widgets = ConnectionHandler.getConnection(store.getRoot(), 'WidgetList_widgets');
    ConnectionHandler.deleteNode(widgets, deleted_widget.id)

【参考方案2】：

您必须从列表中删除您的记录

optimisticUpdater: (store) => 
    const listOfRecords = store.getRoot().getLinkedRecords('list')
    const newList = listOfRecords.filter(record => record.getDataID() !== recordDataID)
    store.getRoot().setLinkedRecords(newList, 'list')

在此示例中，我假设您的列表位于图表的根部

【讨论】：

您能解释一下为什么会这样吗？那么store.delete(id)的目的是什么？

store.delete(id) 是从商店中删除商品的有效方法，您只需在列表视图中说明它。您可以.filter() 输出为空的记录，或者显示一些文本，例如“此记录已被删除”if record === null