React-admin: Updating when the App component is included in a Route does not trigger a PUT request

[7hibault]

What you were expecting:
Saving on the edit component view should trigger a PUT request.

What happened instead:
No PUT request is triggered. Moreover:

• with or without undoable={false}, the undo popup does not show
• the request seems to be queued and can be triggered by asking a deletion

Steps to reproduce:

See the CodeSandbox
https://codesandbox.io/s/great-goldstine-h2u1n

1. Click on one of the rows
2. Update it and save it
3. Notice how no undo popup shows
4. Delete the ressource
5. Notice that the previous update is triggered with the query

Related code:

// in src/index.js
/* eslint react/jsx-key: off */
import React from "react";
import { Admin, Resource } from "react-admin"; // eslint-disable-line import/no-unresolved
import { render } from "react-dom";
import Layout from "./Layout";
import posts from "./posts";
import jsonServerProvider from "ra-data-json-server";
import { BrowserRouter as Router } from "react-router-dom";
import { Route, Switch } from "react-router-dom";

render(
  <Router>
    <Switch>
      <Route
        path="/"
        exact
        component={() => (
          <Admin
            dataProvider={jsonServerProvider(
              "https://my-json-server.typicode.com/typicode/demo/"
            )}
            title="Example Admin"
            layout={Layout}
          >
            {permissions => [<Resource name="posts" {...posts} />]}
          </Admin>
        )}
      />
    </Switch>
  </Router>,
  document.getElementById("root")
);


// in src/post.js
import React from 'react';
import {
    Datagrid,
    Edit,
    List,
    SimpleForm,
    TextField,
    TextInput,
} from 'react-admin';

export const PostList = props => (
    <List {...props}>
        <Datagrid rowClick="edit">
            <TextField source="id" />
            <TextField source="title" />
        </Datagrid>
    </List>
);

export const PostEdit = (props) => (
    <Edit {...props}>
        <SimpleForm>
            <TextInput disabled label="Id" source="id" />
            <TextInput source="title" />
        </SimpleForm>
    </Edit>
);

Other information:

• The issue seems similar to this SO question: https://stackoverflow.com/questions/59716618/react-admin-simpleform-component-doesnt-trigger-the-update-action-in-the-da
• I don't see how this differs from what is in the docs
• Could this be related to components no longer receiving dispatch in the upgrade somehow? I tried to browse the react admin code but could not find my way through.
• React Admin is embedded in a React app that also uses a redux / redux saga, which might cause conflicts

Environment

• React-admin version: 3.2.2
• Last version that did not exhibit the issue (if applicable): before v3
• React version: 16.12.0
• React REST Data Provider version: 3.2.2
• Browser: observed on firefox and chrome
• Stack trace (in case of a JS error): /

[fzaninotto]

I can't reproduce this bug in master.

The code you provide isn't sufficient to detect a problem - it could be e.g. in the authProvider, or in the CORS headers sent by your API - or to reproduce it, as all the files aren't included.

Please fork the react-admin CodeSandbox and tweak it to reproduce the problem.

[7hibault]

Thank you @fzaninotto for following up.

I am not sure how I can reproduce the issue on CodeSandbox. I couldn't find an online json stub server that works with ra-simple-rest-provider and I can't reproduce the issue with ra-data-json-server: https://codesandbox.io/s/restless-fog-rryif?fontsize=14&hidenavigation=1&theme=dark

Do you know of one that would work?

Do you have anything in mind when you mention the authProvider or the CORS headers that could cause this behaviour? I don't see anything in the console that would suggest CORS or authentication failure

[fzaninotto]

There is no fundamental difference between ra-simple-rest-provider and ra-data-json-server. If you can't reproduce the problem with the first, you probably won't manage to reproduce it with the second. That seems to show that the problem is in another part of your code. You should dig further.

[7hibault]

You're absolutely right @fzaninotto , I have the same issue using ra-data-json-server locally. It's already very helpful to know that.

Digging a little further, this seems to happen when I wrap the App component in a route

When I render the react admin App directly without routing, the bug doesn't appear.

With that info, I managed to reproduce the issue on CodeSandbox. I've edited the original question title and body to make it more accurate.
https://codesandbox.io/s/great-goldstine-h2u1n

I'm not sure if this is a bug or if I'm doing something exotic/inappropriate

[fzaninotto]

That'd be https://github.com/marmelab/react-admin/blob/baa20ea89e8b68bb42f1c96770735d815711e53a/packages/ra-core/src/controller/useEditController.ts#L102-L143

[7hibault]

Thanks. I found this earlier navigating through the redux actions, because CRUD_UPDATE is not triggered. I haven't found anything meaningful yet but I'll keep digging.

I don't know if you noticed, I've updated the question with a CodeSandbox example, hopefully it makes my issue more explicit.

I think there's an issue with the redirection when the component is wrapped in a router.

[fzaninotto]

Thanks for the codesandbox. I can reproduce the issue. It seems that whenever I go to the Edit view, the posts resource is unregistered... I don't understand why. I'll dig further.

[fzaninotto]

OK, so the problem comes from including the react-admin app in another Router. This is not supported by react-admin. If you manage to make it work, great! Otherwise, it's not something we want to spend time on, so I'll close this issue.

As a side note, maybe sharing the history between your router and the react-admin router will help.

[7hibault]

Thanks for taking the time to look into it.

However it seems to me that this is an important feature for users who want to include react-admin in another redux application. If you already have an app in which you want to include react-admin, there's a great chance that this app uses react router. If so, how are you supposed to do it?