Error "withRef is removed" as import drfProvider from 'ra-data-drf';

[levanlau]

Hi,
I am newbie for using "ra-data-drf".
There is an error "withRef is removed. To access the wrapped instance, use a ref on the connected component". It happens when i past the line "import drfProvider from 'ra-data-drf';" to App.js
When i comment this import line, everything is ok, but if i import it i will have error above.

• If i install "ra-data-drf" the first(and not install react-admin) and demo, everything is ok.
• But if i install react-admin the first, then install "ra-data-drf", react-admin notifies error above.
  ===> I try many times, the result is no change. I don't know where I am wrong ?
  Please for me some notes for this, thanks.

[l0n3woof]

Same thing for me, don't know what is happening. I followed the example and even made .d.ts file for the same.

[MicroJackson]

Hi, a bit late but I want to try to clarify for people still having problems with this.
This is because this DataProvider is made for React Admin 2.x.
The React Admin you use is probably some version of 3.x.
Underlying is the problem: https://github.com/reduxjs/react-redux/releases/tag/v6.0.0 (See the breaking changes)
From React Admin 2 to React Admin 3 the dependency React-Redux has been updated, so all the DataProviders should have updated their code to comply with that. However, this is not the case as you can see, and not just for Django's DataProvider afaik.

#5 has a 'solution' for this.
However, as far as my knowledge goes of React & React Admin, he does not implement the hooks correctly. This only works for the general CRUD calls, but if you want to use 'Actions' this will break.
https://marmelab.com/react-admin/Actions.html
For me this currently became a problem because my dashboard relies on those Actions, that's why I revisited this repository again, but it seems to still not have updated for React Admin 3.

I will try to create a functioning Django DataProvider for React Admin 3 this week, but I am not a good React programmer. If I manage to write one I will make a gist here.

[MicroJackson]

After some digging I found out that the code is not the problem, the problem is the npm package dependencies. It relies on
"dependencies": { "query-string": "~5.1.1", "react-admin": "^2.4.1" },
And those in turn rely on React Redux 5.0, the npm command throws:
npm WARN deprecated react-router-redux@5.0.0-alpha.9: This project is no longer maintained.
That's how you get the GetRef error from the previous comment I made.

So if you just download the index.js code in the src folder and create your own dataProvider it works, but with the npm package it will break. So it will be amazing if @FelipeRubilar could update the dependencies to React Admin 3.x to avoid all this confusion.

[Ishma59]

@MicroJackson now how did you solve this problem?

[MicroJackson]

@Ishma59
I thought my explanation would be specific enough, but here goes.

1. Do the tutorial: https://marmelab.com/react-admin/Tutorial.html
2. At one step you make a dataProvider:

import jsonServerProvider from 'ra-data-json-server';

const dataProvider = jsonServerProvider('https://jsonplaceholder.typicode.com');
const App = () => <Admin dataProvider={dataProvider} />;

3. Download the index.js code:
   https://github.com/synaptic-cl/ra-data-drf/tree/develop/src
4. Put it in a dataProvider.js file next to the App.js in your tutorial folder.
5. Change the dataProvider from step 2 to your own dataProvider:

import drfProvider from './dataProvider';
...

const dataProvider = drfProvider('your.own.backend.com');
# OR
const dataProvider = drfProvider(window.location.href.includes('localhost') ? 'http://127.0.0.1:8000' : 'your.own.backend.com');
# Just so you don't have to switch from local to production all the time.

...
const App = () => <Admin dataProvider={dataProvider} />;

Hope it helps.

[Ishma59]

Perfect Thanks for the help

[cgitosh]

Thank you @MicroJackson