Relay Modern: delete record in optimisticUpdater

Question

In my app I have a mutation where I want to use the optimisticUpdater to update the view before the server response. For that I need to remove some records from a list into the relay store, like that:

optimisticUpdater: storeProxy => {
  storeProxy.delete(recordDataID)
}

The problem is that relay don't remove the record, but it transforms the record in null. This can be annoying because I have to filter the list every time I use it in my app.

Some one know how can I remove the record ? thx

score 3 · Accepted Answer · answered May 22 '19 at 11:26

3

You have to remove your records from the list

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

In this example I assume your list is placed at the root of your graph

answered May 22 '19 at 11:26

Yann AMSELLEM

56
4

Any chance you can explain why this is the case? What is the purpose of `store.delete(id)` then? – BrushyAmoeba Jun 25 '20 at 23:37
`store.delete(id)` is a valid method for removing items from the store, you just need to account for it on your list view. You could either `.filter()` out records that are null, or show some text like "This record has been deleted" `if record === null` – cdr Oct 18 '20 at 16:40

score 2 · Answer 2 · answered Oct 18 '20 at 16:38

If you decorate your query with @connection, then you can use the ConnectionHandler to easily remove records:

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

Relay Modern: delete record in optimisticUpdater

2 Answers2