Недопустимая подпрограмма `dataProvider` типа`object`, переданная в CoreAdmin, ожидаемая функция `

Question

Я только что поигрался с фреймворком реагировать на администратор и попытался реализовать собственный провайдер данных. Я прочитал документацию о том, как это сделать, и в итоге использовал пример в качестве отправной точки по адресу: https://marmelab.com/react-admin/DataProviders.html.

Я получил следующую ошибку в консоли:

Предупреждение: сбойный тип опоры: недопустимая опора dataProvider типа object > поставляется в CoreAdminожидаемый function, в CoreAdmin (созданный withContext(CoreAdmin)) в withContext(CoreAdmin) (в App.js:16) в приложении (в index.js:7)

Это мой App.js

import React from 'react';
import { Admin, Resource } from 'react-admin';
import { AssetList } from './assets.js';
import OssApiProvider from './DataProviders/OssApiProvider.js';
import { GET_LIST } from 'react-admin';

const dataProvider = OssApiProvider(
    GET_LIST,
    'asset',
    {
        pagination: {offset: 0, limit: 10},
        sort: {field: 'id', order: 'asc'}
    }
);
const App = () => (
    <Admin dataProvider={dataProvider}>
        <Resource name="asset" list={AssetList} />
    </Admin>
);

export default App;

А это мой поставщик данных: DataProviders/OssApiProvider.js

import { stringify } from 'query-string';
import {
    GET_LIST,
    GET_ONE,
    CREATE,
    UPDATE,
    UPDATE_MANY,
    DELETE,
    DELETE_MANY,
    GET_MANY,
    GET_MANY_REFERENCE,
} from 'react-admin';

const apiUrl = '';

/**
 * Maps react-admin queries to OSS REST API
 *
 * @param {string} type Request type, e.g GET_LIST
 * @param {string} resource Resource name, e.g. "posts"
 * @param {Object} payload Request parameters. Depends on the request type
 * @returns {Promise} the Promise for a data response
 */
export default (type, resource, params) => {
    let url = '';
    const options = { 
        headers : new Headers({
            Accept: 'application/json',
        }),
    };
    switch (type) {
        case GET_LIST: {
            const { offset, limit } = params.pagination;
            const { field, order } = params.sort;
            const query = {
                sort: field,
                order: order.toLowerCase(),
                offset: JSON.stringify(offset),
                limit: JSON.stringify(limit),
                filter: JSON.stringify(params.filter),
            };
            url = `${apiUrl}/${resource}?${stringify(query)}`;
            break;
        }
        case GET_ONE:
            url = `${apiUrl}/${resource}/${params.id}`;
            break;
        case CREATE:
            url = `${apiUrl}/${resource}`;
            options.method = 'POST';
            options.body = JSON.stringify(params.data);
            break;
        case UPDATE:
            url = `${apiUrl}/${resource}/${params.id}`;
            options.method = 'PUT';
            options.body = JSON.stringify(params.data);
            break;
        case UPDATE_MANY:
            const query = {
                filter: JSON.stringify({ id: params.ids }),
            };
            url = `${apiUrl}/${resource}?${stringify(query)}`;
            options.method = 'PATCH';
            options.body = JSON.stringify(params.data);
            break;
        case DELETE:
            url = `${apiUrl}/${resource}/${params.id}`;
            options.method = 'DELETE';
            break;
        case DELETE_MANY:
            // const query = {
            //     filter: JSON.stringify({ id: params.ids }),
            // };
            url = `${apiUrl}/${resource}?${stringify(query)}`;
            options.method = 'DELETE';
            break;
        case GET_MANY: {
            const query = {
                filter: JSON.stringify({ id: params.ids }),
            };
            url = `${apiUrl}/${resource}?${stringify(query)}`;
            break;
        }
        case GET_MANY_REFERENCE: {
            const { page, perPage } = params.pagination;
            const { field, order } = params.sort;
            const query = {
                sort: JSON.stringify([field, order]),
                range: JSON.stringify([
                    (page - 1) * perPage,
                    page * perPage - 1,
                ]),
                filter: JSON.stringify({
                    ...params.filter,
                    [params.target]: params.id,
                }),
            };
            url = `${apiUrl}/${resource}?${stringify(query)}`;
            break;
        }
        default:
            throw new Error(`Unsupported Data Provider request type ${type}`);
    }

    return fetch(url, options)
        .then(res => {
            return res.json();
        })
        .then(json => {
            console.log(json)
            switch (type) {
                case GET_LIST:
                case GET_MANY_REFERENCE:
                    var response = {
                        data: json._embedded[Object.keys(json._embedded)[0]],
                        total: parseInt(json.total, 10),
                    };
                    console.log(response);
                    return response;
                case CREATE:
                    return { data: { ...params.data, id: json.id } };
                default:
                    return { data: json };
            }
        }
    );
};

Кто-нибудь знает, где искать или еще лучше исправить это, потому что у меня просто кончились идеи?

Answer 1

Ваш OssApiProvider кажется в порядке!

Проблема заключается в App.js: когда вы импортируете OssApiProvider это ваш поставщик данных. Вам не нужно вызывать функцию, вы можете передать ее как есть.

Например:

const App = () => (
    <Admin dataProvider={OssApiProvider}>
        <Resource name="asset" list={AssetList} />
    </Admin>
);