CODEWITHSUNDEEP
node.jsreactjsexpressreact-admin
Ashy Ashcsi
Ashy Ashcsi

Reputation: 1597

Connect existing nodejs express API with react-admin

I have an existing nodejs and express API for shopping cart. I want to integrate this API with react-admin. https://github.com/marmelab/react-admin. I have added the following code to app.js file to load the categories from database.

// in src/App.js
import React from 'react';
import { Admin, Resource } from 'react-admin';
import restProvider from 'ra-data-simple-rest';

import { CategoriesList } from './categories';

const App = () => (
  <Admin dataProvider={restProvider('http://localhost:5000/api')}>
    <Resource name="categories" list={CategoriesList} />
  </Admin>
);

export default App;

But it keeps throwing the following errors:

The Content-Range header is missing in the HTTP Response. The simple REST data provider expects responses for lists of resources to contain this header with the total number of results to build the pagination. If you are using CORS, did you declare Content-Range in the Access-Control-Expose-Headers header?

Also, modified the code on server side to include these headers as below:

/**
 * GET request to retrieve all categories
 */
router.get('/api/categories', async (req, res) => {
    try {
        const categories = await Category.find({});
        res.setHeader('Access-Control-Expose-Headers', 'Content-Range');
        res.setHeader('Content-Range', 5);
        res.send({ data: categories, total: 5 });
    } catch (error) {
        console.log(`error in getting categories ${error}`);
    }
})

Has anyone worked before with react-admin. What am I missing here ?

Thanks

Upvotes: 1

Views: 2702

Answers (1)

Gildas Garcia
Gildas Garcia

Reputation: 7066

Yes, your Content-Range header is wrong. It must have the following format:

Content-Range: categories 0-5/5

See https://github.com/marmelab/react-admin/tree/master/packages/ra-data-simple-rest

Upvotes: 2

Related Questions