Rerender a row from Datagrid without refresh the whole list

Question

In a List with DataGrid, in each row I have a button for change status, on button click I show a modal with a form, after submit, in the response I have updated object with the same id and new status, I want to rerender only one row from data dataGrid and his child InvoiceShow

const InvoiceList = (props: ListProps) => {
    return (
        <List {...props}>
            <Datagrid rowClick="expand" expand={<InvoiceShow />}>
                <TextField source="id" />
                <NumberField source="status" />
                <Button onClick={() => setOpenDialog(true)} >
                  Update Status
                </Button>
            </Datagrid>
        </List>
    );
};

<Dialog open={setOpenDialog}>
  <DialogTitle>Update Status</DialogTitle>
    <DialogContent>
       <form onSubmit={handleSubmit}>
          ...
        </form>
    </DialogContent>
</Dialog>

const handleSubmit= () => {
        RequestManager.updateStatus()
            .then((updatedInvoice) => {
                //rerender
            })
            .catch((response) => {
                handleCatch(response);
            });
    };

I can use refresh() from useRefresh() hooks, but this will increase the number of requests Is there a way to rerender only one row from the Datagrid and if is expanded InvoiceShow also?

Answer 1

Try with refetch instead of refresh

refetch: A function you can call to trigger a refetch. It’s different from the refresh function returned by useRefresh as it won’t trigger a refresh of the view, only this specific query.

https://marmelab.com/react-admin/doc/3.19/Actions.html#:~:text=A%20function%20you%20can%20call%20to%20trigger%20a%20refetch.%20It%E2%80%99s%20different%20from%20the%20refresh%20function%20returned%20by%20useRefresh%20as%20it%20won%E2%80%99t%20trigger%20a%20refresh%20of%20the%20view%2C%20only%20this%20specific%20query.