React Admin - как вызвать dataProvider с вложенным путем, например, abc / def

Question

Компонент React-admin Resource отображает значение name prop в конечную точку.

Например, для доступа к данным.http://example.com/abc, ваш Resource компонент выглядит следующим образом: <Resource name='abc'/>

Что я хочу получить доступ к ресурсу на http://example.com/abc/def?Этот <Resource name='abc/def'/> даже не вызывает функцию dataProvider.

Я бы не хотел закончить таким уродливым решением, как:

// App.js
<Resource name='def'/>

---

// dataProvider.js
if (resource==='def') {
url = 'abc/def'
}

Doимена ресурсов всегда должны быть без /?Есть какие-нибудь хаки?

Answer 1

Я работаю над проектом, в котором мы закончили писать свой собственный dataProvider, поскольку наш API не является строго успокоительным.

Это немного ласкает голову, но как только вы понимаете рабочий процесс, это не так уж плохо.

Обычно при вызове dataProvider происходит три вещи:

1. dataProvider использует параметры для вызова convertDataProviderRequestToHTTP, который возвращает URL-адрес и параметры, используемые для отправки вызова fetch / api (построение запроса)
2. извлечение запроса / вызов API-интерфейса (отправка запроса)
3. dataProvider возвращает результаты вызова convertHTTPResponseToDataProvider, который преобразует ответ во что-то полезное для получающего его ресурса (обработка ответа на запрос)

Вот ссылка на соответствующую часть документации реагирования с администратором https://marmelab.com/react-admin/DataProviders.html#writing-your-own-data-provider

В нашем решении используются операторы switch, для которых используются типы, а затем каждыйДело имеет логику для обработки различных ресурсов.

Я не уверен, является ли это предполагаемой реализацией, но мы получили что-то вроде этого:

// import all the things

// set your api path prefix

const convertDataProviderRequestToHTTP = (type, resource, params) => {
     //switch statement with one case for each action type
     // and some logic where necessary for different resources ie. 
    switch(type){
        case "GET_ONE":{
            // if statements to handle resources with goofy endpoints
            if(resource === 'abc/def'){
                const url = `${API_PREFIX}/abc/def`;
                const options = {
                    // set the specific options that you need for a 
                    // each particular resource
                }
            }

            // handles resources with normal restful endpoints
            const url = `${API_PREFIX}/${RESOURCE}`;
            const options = {
                // this part depends on how you're doing your fetching
                // might need to include the particular rest verb
                // and any other settings
            }
        }

    }
    return {
        url,
        options
    }

}

const convertHTTPResponseToDataProvider = (response, type, resource, params){
    // another switch statement that converts the response that you get
    // from your api to something that's useful to your Resource
    switch(type){
        case 'GET_ONE':{
            if(resource === 'abc/def'){
                // convert response into something useful and return it
                return{
                      data: convertedResponse
                }
            }
        }
    }
}

export default (type, resource, params) => {

    // this comes from react-admin, you could use plain old fetch or
    // your favorite fetch library like axios instead
    const { fetchJson } = fetchUtils;

    // part 1, using the stuff that was sent in the dataProvider 
    // call to generate what you need to sending your fetch
    const { url, options } = convertDataProviderRequestToHTTP(
        type,
        resource,
        params
    );

    // add logic for grabbing your tokens and adding headers to options here
    options.headers.set('headerkey', 'headervalue');

    // part 2 sending the fetch request
    return fetchJson(url, options).then(response =>
        // part 3, converting the response and returning it
        convertHTTPResponseToDataProvider(response, type, resource, params)
    );
};

По мере роста приложения мы разбили его на отдельные файлы, так чтоэто легче читать, но, похоже, пока у нас все хорошо.

Мне пришлось установить браузерный инструмент приставки и вставить множество операторов регистрации, чтобы как-то пройти через это и получить лучшее представление о том, что происходит и когда это происходит.После получения первого комбо типа действие / ресурс, его можно было щелкнуть и добавить к нему с тех пор было довольно легко понять.