如何更改 React-Admin 过滤器

Question

I am new to react, and I use react-admin for my dashboard. But I have problem of fetching data from my API.

here's my API:

http://localhost:3333/verifications/browse?page=1&per_page=10&verification_level_id=2&verification_status_id=3

then I saw the endpoint that react-admin was using,

http://localhost:3333/verifications/browse?filter=%7B%7D&range=%5B0%2C9%5D&sort=%5B%22id%22%2C%22ASC%22%5D

how can I change that endpoint?

Answer 1

The place to modify the request before it is sent (and the response after it is received) is the dataProvider . React-admin has extensive documentation about it . If you don't understand dataProviders in react-admin, you're going to meet a lot of blockers, so this should be your starting point.

I believe you're using ra-data-simplerest as a base for your example (or is it something else?), you can override the getList to something that better fits your need, based on the following implementation:

import { fetchUtils } from 'react-admin';
import { stringify } from 'query-string';

import simpleRestDataProvider from './simpleRestDataProvider';

const apiUrl = 'https://my.api.com/';
const httpClient = fetchUtils.fetchJson;

const dataProvider = {
    ...simpleRestDataProvider,
    getList: (resource, params) => {
        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),
        };
        const url = `${apiUrl}/${resource}?${stringify(query)}`;

        return httpClient(url).then(({ headers, json }) => ({
            data: json,
            total: parseInt(headers.get('content-range').split('/').pop(), 10),
        }));
    },
}