The response to 'GET_LIST' must be like { data : [...] }, but the received data is not an array

Question

I am trying to use the ra-data-simple-rest data provider.

import React from 'react';
import { Admin, fetchUtils, Resource } from 'react-admin';
import simpleRestProvider from 'ra-data-simple-rest';
import { PostList } from './Posts';

const dataProvider = simpleRestProvider('http://localhost:8000');

const App = () => (
    <Admin dataProvider={dataProvider}>
        <Resource name="posts" list={PostList} />
    </Admin>
);

export default App;

The react-admin listens to http://localhost:3000/#/posts

Api is running on : http://localhost:8000/posts which returns response as.

$response = new JsonResponse($output);
$response->headers->set('Content-Range', 'posts 0-0/5');
$response->headers->set('Access-Control-Expose-Headers', 'Content-Range');
$response->headers->set('Access-Control-Allow-Origin', '*');
$response->headers->set("Access-Control-Allow-Headers", "Content-Type, Accept, X-Requested-With");

which retuns something as

{
    "data": [
        {
            "id": "1",
            "title": "Hello world",
            "body": "Hello world"
        },
        {
            "id": "2",
            "title": "Hello world",
            "body": "Hello world"
        }
    ],
    "total": 2
}

I am getting an error as

The response to 'GET_LIST' must be like { data : [...] }, but the received data is not an array. The dataProvider is probably wrong for 'GET_LIST'

If the data key is removed as

[
    {
        "id": "1",
        "title": "Hello world",
        "body": "Hello world"
    },
    {
        "id": "2",
        "title": "Hello world",
        "body": "Hello world"
    }
]

is getting the result.

Chord

A few more changes made to support CORS . – Chord

For somereason it shows Failed to fetch where? – Theophylline

Hi, I have updated the question. Failed to Fetch was shown on red colour and it was due to more CORS related issue. So added appropriate headers. Current issue is with The response to 'GET_LIST' must be like { data : [...] }, but the received data is not an array. The dataProvider is probably wrong for 'GET_LIST' – Chord

Answer 1

Finally I understood this is working as expected by react-admin.

The problem was in the documentation I noticed

which confused me.

Looking more into the https://github.com/marmelab/react-admin/blob/1b6967f3367b13a6675de7047bd9385dc36a8db5/packages/ra-data-simple-rest/src/index.js#L118 I understood the data is rebuild by the provider.

Chord

Yep. Do you see any way we can improve the documentation or something? Also, you can mark your answer as "self answered" – Once

> Do you see any way we can improve the documentation or something? I was re-reading this today, "React-admin expects responses from Data Providers to be objects with a data property." I think I missed to clearly recognize it is talking about Data Provider and not the url that returns the response. May be make the Data Provider bold, so it is highlighted clearly ? > Also, you can mark your answer as "self answered" Where can you mark this ? I didn't find that option ie why. Mostly I don't like answering my own, but answering this may help others ie the only reason I wrote it. – Chord

This answer helped me, @Once I think maybe a note in marmelab.com/react-admin/DataProviders.html under the Usage section where it mentions the Simple REST data provider would be helpful; something like "note that the ra-data-simple-rest package automatically handles creating the object with attribute data". – Peddler

Answer 2

I face same issue , after check my API response,I understand there is one field missing in object:

{ "data": [ { "id": "1", "title": "Hello world", "body": "Hello world" }, { "title": "Hello world", "body": "Hello world" } ], "total": 2 }

id is missing in second obj. that's why i face the issue

Any one who face this issue please check all fields in your API response.

Neu

Welcome to SO! Could you explain your answer? You check your API and you found (something, so expose which one) missin in... A Screenshot will help. – Burmese

{ "data": [ { "id": "1", "title": "Hello world", "body": "Hello world" }, { "title": "Hello world", "body": "Hello world" } ], "total": 2 } id is missing in second obj. that's why i face the issue – Neu

please check the answer mentioned above. – Neu

Answer 3

I´ve just seen Hari K T response and thats SO true.

I couldn´t understand why React didnt accept my response being built like this: {'data': {'id': 31, 'chat_name': 'yudyucvbcvbcvb', 'theme': 'duytyu'}}

Looks like the {'data': ...} part is COMPLETLY unnecesary.

In our partner´s Hari link : https://github.com/marmelab/react-admin/blob/1b6967f3367b13a6675de7047bd9385dc36a8db5/packages/ra-data-simple-rest/src/index.js#L118 it shows clearly that the data part is initialized, so in mi case I was sending an erroneus JSON like this {'data':{'data': {'id': 31, 'chat_name': 'yudyucvbcvbcvb', 'theme': 'duytyu'}}}.

In my case, my error was asking for an ID after data -> {data: {id:...}}, but I was sending instead {data: {data: {id...}}}

Sochi