How to update ReferenceManyField after performing an action to one of the ListItems in it

Question

I have a form for editing an Entity that hasMany children. Within this form there's a ReferenceManyField component. This component lists items along with an action button that I have created to let's say “approve” things.

<Edit>
  <SimpleForm>
    <ReferenceManyField reference="Expenses" target="expenseReportId" label="Expenses">
      <Datagrid>
        <UnassignButton />
        <TextField source="name" />
      </Datagrid>
    </ReferenceManyField>
  </SimpleForm>
</Edit>

UnassignButton performs a regular action:

const action = (id, data, basePath) => ({
  type: 'EXPENSE_UNASSIGN',
  payload: { id: id, data: { ...data, expenseReportId: null } },
  meta: { resource: basePath, fetch: UPDATE, cancelPrevious: false },
})

How can I force the ReferenceManyField or the whole Edit form to be refreshed when this action is performed? What's the best practice for that?

Thanks!

score 1 · Answer 1 · answered Mar 06 '18 at 13:54

1

I would dispatch the

import { refreshView } from "react-admin";

action after changing the state.

answered Mar 06 '18 at 13:54

twDuke

927
1
8
22

Hi! Thanks for the reply. This seems quite obvious. But the question is: where do I put the dispatching of this action. – Konstantin Bodnia Mar 09 '18 at 13:45
Should I do it in the saga or where? – Konstantin Bodnia Mar 09 '18 at 13:51
You should dispatch it after all side effects you are interested in have finished updating. I prefer to keep all my side effects ln sagas as I like how that code reads. – twDuke Mar 11 '18 at 15:35

score 1 · Answer 2 · answered Aug 04 '20 at 15:27

Now you can use useRefresh hook in react-admin

const refresh = useRefresh();

just use refresh when you want to update the List

import * as React from "react";
import { useMutation, Button } from 'react-admin';
import {  useNotify, useRedirect, useRefresh } from 'react-admin';

export const MyButton = ({ record }) => {

    const notify = useNotify();
    const redirect = useRedirect();
    const refresh = useRefresh();
 
    const [createPost, { loading }] = useMutation({
        type: 'create',
        resource: 'posts',
        payload: { data:
                    {
                      userId: "xxxxx",
                      body: "something"
                      isConfirmed: false
                    }
                 }

    },
    {
        onSuccess: ({ data }) => {
            redirect('/posts');
            refresh();
            notify('post created');
        },
        onFailure: (error) => notify(`error: ${error.message}`, 'warning'),
    });

    return (
        <Button label="CREATE" onClick={ createPost } } disabled={loading} >
            Create Post
        </Button>
    )
};

How to update ReferenceManyField after performing an action to one of the ListItems in it

2 Answers2