Custom Admin component with custom dataprovider

Viewed 255

I need custom Admin component to update the list of Resource components dynamically.
The documentation provides an example:

import * as React from 'react';
import { useEffect, useState } from 'react';
import { AdminContext, AdminUI, Resource, ListGuesser, useDataProvider } from 'react-admin';

function App() {
    return (
        <AdminContext dataProvider={myDataProvider}>
            <AsyncResources />
        </AdminContext>
    );
}

function AsyncResources() {
    const [resources, setResources] = useState([]);
    const dataProvider = useDataProvider();

    useEffect(() => {
        // Note that the `getResources` is not provided by react-admin. You have to implement your own custom verb.
        dataProvider.getResources().then(r => setResources(r));
    }, []);

    return (
        <AdminUI>
            {resources.map(resource => (
                <Resource name={resource.name} key={resource.key} list={ListGuesser} />
            ))}
        </AdminUI>
    );
}

It is supposed to work with custom dataprovider that has getResources() function.
Ok. But how this function is supposed to look like? Or rather what it should return? Because tried many things and none is flying.

And also. There is a warning about React Hook useEffect missing a dependency: 'dataProvider'. Solutions online aren't usable so far. I don't think my example doesn't work because of that, but it's possible. How to fix that in that case?

So yeah, in short - how to make this provided in documentation example to work?

+++

Edit: In case anyone wondering here is how I apply my dataprovider:

import dataProvider from './dataprovider';

function App() {
    return (
        <AdminContext dataProvider={dataProvider}>
            <AsyncResources />
        </AdminContext>
    );
}

And here is my get_resources function:

getResources: () => {
    const url = `${apiUrl}/get_resources`;

    return httpClient(url).then(
        ({ headers, json }) => ({
        data: json["data"],
        total: json["total"]
    }));
},

Edit 2:
Problem maybe lies within dataprovider, since it fails with error message "TypeError: can't convert undefined to object" while trying to call "isDataProviderOptions" function from here: node_modules/ra-core/esm/dataProvider/getDataProviderCallArguments.js:19.
Or it's calling the wrong dataprovider. Not the custom one I've supplied to the AdminContext component.

Should I add the code of my custom dataprovider?

0 Answers
Related