Unknown dataProvider function: getList error in react admin

Question

I am trying to fetch some data from mongoDB and show them on react admin panel. I am using react-admin . I take the data with _id instead of id

[
    {
        "_id": "61f665cc0389af42ef103932",
        "title": "  Seagate Portable 2TB External Hard Drive",
        "price": [
            59,
            62,
            65
        ],
        "image": "/hardisk.jpg",
        "__v": 0,
        "extraOptions": []
    },
    {
        "_id": "61f6696b0389af42ef103935",
        "title": "POLAM-FOTO 52'' Photo Tripod Stand",
        "price": [
            23,
            26,
            30
        ],
        "image": "/tripod.jpg",
        "__v": 0,
        "extraOptions": []
    },
    {
        "_id": "61f7985dee0af5795c7b937c",
        "title": "APPLE MacBook Air (2020) M1 Notebook",
        "price": [
            1117,
            1179,
            1189
        ],
        "image": "/macbook.webp",
        "extraOptions": [
            {
                "desc": "Transport insurance (Shop Garant)",
                "price": 14.95,
                "_id": "61f7985dee0af5795c7b937d"
            }
        ],
        "__v": 0
    }
]

So I followed the documentation in here custom primary keys

Here my App.js

// in src/App.js
import * as React from "react";
import { Provider } from 'react-redux';
import { createHashHistory } from 'history';
import { Admin, Resource} from 'react-admin';
import UserIcon from '@material-ui/icons/Group';

import createAdminStore from './createAdminStore';

import { ProductsList } from "./products";
import dataProvider from "./dataProvider";

// dependency injection
const authProvider = () => Promise.resolve();

const history = createHashHistory();



const App = () => (
    <Provider
        store={createAdminStore({
            authProvider,
            dataProvider,
            history,
        })}
    >
        <Admin
            authProvider={authProvider}
            dataProvider={dataProvider.getList("products", {
              pagination: { page: 1, perPage: 5 },
          })}
            history={history}
            title="My Admin"
        >
           <Resource name="products" icon={UserIcon} list={ProductsList} />
        </Admin>
    </Provider>
);

export default App;

Also here my dataProvider.js

import { fetchUtils } from 'react-admin';

const apiUrl="http://localhost:3000/api"
import { stringify } from 'query-string';
const httpClient = fetchUtils.fetchJson;


const dataProvider = {
    getList: (resource, params) => {
        const { page, perPage } = params.pagination;
        const query = {
            range: JSON.stringify([(page - 1) * perPage, page * perPage - 1]),
        };
        const url = `${apiUrl}/${resource}?${stringify(query)}`;

        console.log("dsd",resource)
        return httpClient(url).then(({ headers, json }) => ({
           data: json.map(resource => ({ ...resource, id: resource._id }) ),
            total: parseInt(headers.get('content-range').split('/').pop(), 10),
        }));
    },

};

export default dataProvider

When I look at the.network from developer console, I can see the request. Take a look at the screen shot

Answer 1

I think you need to pass the authorization token as a parameter in the dataProvider function wrapper, and using react-cookie, you can use all the power of states and React Hooks.

Something like this:

function App() {
  const [cookies] = useCookies(['authToken']);
  return (
    <Admin
      dataProvider={dataProvider(cookies.authToken)}
      authProvider={authProvider}
      dashboard={Dashboard}
    >
      <Resource name="adear.associado" list={AssociadoList} options={{ label: 'Associado' }} show={AssociadoShow} />
    </Admin>
  );
}

Answer 2

In Admin component, I passed dataProvider prop as just dataProvider then it worked

  
       <Admin

            authProvider={authProvider}
            dataProvider={dataProvider}
            history={history}
            title="My Admin"
        >
           <Resource name="products" icon={UserIcon} list={ProductsList} />

      </Admin>

Because react-admin handle the calling getList function itself