CODEWITHSUNDEEP
javascriptreactjsreact-admin
D. Walker
D. Walker

Reputation: 117

react-admin edit component does not call update function

I'm working on a react-admin application and having an issue where the update function in my dataProvider is not called when the 'Save' button is clicked under the edit view.

My App.js looks like this:

import React, { useEffect } from 'react';
import { Switch, Route, Redirect, useLocation } from 'react-router-dom';
import { setGlobal, getGlobal } from 'reactn';
import ReactGA from 'react-ga';
import PrivateRoute from './Auth/PrivateRoute';
import UserLayout from './components/user/layout/Layout';
import AuthLayout from './components/auth/Layout';
import defaultGlobalState from './defaultGlobalState';
import portalApiDataProvider from "./providers/portalApiDataProvider";
import {Admin, ListGuesser, EditGuesser, ShowGuesser, Resource, Layout} from "react-admin";
import { UserList, UserEdit, UserShow } from '../src/components/admin/users';
import { AccountList } from "./components/admin/serviceAccounts";
import authProvider from "./providers/authProvider";

ReactGA.initialize(process.env.REACT_APP_GA_KEY);

const jwt = JSON.parse(localStorage.getItem('jwt'));

setGlobal({ ...defaultGlobalState, jwt });

const App = () => {
  const { userId } = getGlobal();

  let location = useLocation();
  useEffect(() => {
    ReactGA.pageview(location.pathname + location.search);
  }, [location]);

  return (
      <Admin dataProvider={portalApiDataProvider} authProvider={authProvider}>
          <Resource name="users" options={{label: 'Customer Profiles'}} list={UserList} show={UserShow} edit={UserEdit}/>
          <Resource name="serviceAccounts" list={AccountList}/>
      </Admin>
  );
};

export default App;

My UserEdit is as follows:

<Edit title={<UserTitle/>} {...props}>
    <SimpleForm>
        <TextInput source="first_name" />
        <TextInput source="last_name" />
        <TextInput source="email" />
        <TextInput source="phone" />
        <TextInput source="default_account_number" />
        <BooleanInput source="validated" format={v => v === 1 ? true : false}/>
    </SimpleForm>
</Edit>

I've seen this issue brought up a couple of times, but without any details on resolution. This link mentions using a Notification component in the Layout (I'm pretty sure I'm using the default layout), or disabling undo (which does work but is not ideal): https://github.com/marmelab/react-admin/issues/3049

This link also discusses a similar issue with reference to a demo project, but I'm not able to find the relevant code: https://github.com/marmelab/react-admin/issues/5082

What am I missing here?

Upvotes: 1

Views: 1935

Answers (3)

Terry T&#250; Nguyễn
Terry T&#250; Nguyễn

Reputation: 380

You should set the mutationMode of Edit into "pessimistic" So your will be

 <Edit
      {...props}
      mutationMode="pessimistic"
>

Document here: https://marmelab.com/react-admin/Edit.html#mutationoptions

Upvotes: 1

SagarScript
SagarScript

Reputation: 1252

Problem

mutationMode="undoable" which is the default leads to a bug when you try to redirect within the mutationOptions props onSuccess function.

This is because the onSuccess function is fired and a redirect occurs before the underlying mutation actually completes i.e. the user is redirected away before any mutation is called.

Work Around

The workaround is therefore ensuring that the onSuccess function is called only after the mutation completes. This can be done by mutationMode="pessimistic" since it will wait for the mutation to actually complete.

This behaviour is not well documented in the react admin docs - at least I was not able to find anything - the docs in fact specifically show an example of a redirect in the onSuccess function with no mention of this behaviour.

The docs specifically mention: "Note that the redirect prop is ignored if you set the mutationOptions prop. See that prop for how to set a different redirection path in that case."

Solution

My suggestion is - that if you require to redirect on a successful edit or creation of a record, simply use the redirect prop.

Upvotes: 2

Forsythe
Forsythe

Reputation: 146

For some reason, the undoable prop on Edit is causing problem. Set it to false and it will call the update properly. I don't know why, I am using this under a special endpoint as a "sub-app", so might be due to conflicting routers, too tired to find out.

Upvotes: 3

Related Questions