将过滤器发送到 react-admin 列表中的导出器

Question

I am trying to build my own exporter function but I need to call a different dataProvider. I don't want to use the fetchRelatedRecords as there could be thousands of ids and I would hit the database way too many times. I am trying to send the filters from my list component to the exporter but I have no idea how to do it. What could be a possible way?

        <List
            aside={<OrdersAside kpis={kpis} />}
            bulkActionButtons={false}
            filters={<OrdersFilter />}
            sort={{ field: 'pickup_at', order: 'DESC' }}
            filterDefaultValues={{
                pickup_at__gt: pickupAtGt,
            }}
            exporter={exporter}
            {...props}
        >

Many thanks

Answer 1

The exporter function doesn't have access to the filter, as it's already applied to query the list of records that the exporter receives as first parameter.

If you need to do custom queries within the exporter, you should know that the exporter function receives the dataProvider as first argument.

And if you can't do exactly what you want with the <ExportButton> , then replace it with your own component! The implementation isn't super complex:

import * as React from 'react';
import { useCallback, FunctionComponent } from 'react';
import PropTypes from 'prop-types';
import DownloadIcon from '@material-ui/icons/GetApp';
import {
    Button,
    fetchRelatedRecords,
    useDataProvider,
    useNotify,
    useListContext,
    SortPayload,
    Exporter,
    FilterPayload,
} from 'react-admin';

const ExportButton = props => {
    const {
        maxResults = 1000,
        onClick,
        label = 'ra.action.export',
        icon = defaultIcon,
        exporter: customExporter,
        ...rest
    } = props;
    const {
        filterValues,
        resource,
        currentSort,
        exporter: exporterFromContext,
        total,
    } = useListContext(props);
    const exporter = customExporter || exporterFromContext;
    const dataProvider = useDataProvider();
    const notify = useNotify();
    const handleClick = useCallback(
        event => {
            dataProvider
                .getList(resource, {
                    sort: currentSort,
                    filter: filterValues,
                    pagination: { page: 1, perPage: maxResults },
                })
                .then(
                    ({ data }) =>
                        // here, do what you want with the data
                        // ...
                        // the default implementation is:
                        exporter &&
                        exporter(
                            data,
                            fetchRelatedRecords(dataProvider),
                            dataProvider,
                            resource
                        )
                )
                .catch(error => {
                    console.error(error);
                    notify('ra.notification.http_error', 'warning');
                });
            if (typeof onClick === 'function') {
                onClick(event);
            }
        },
        [
            currentSort,
            dataProvider,
            exporter,
            filterValues,
            maxResults,
            notify,
            onClick,
            resource,
            sort,
        ]
    );

    return (
        <Button
            onClick={handleClick}
            label={label}
            disabled={total === 0}
            {...sanitizeRestProps(rest)}
        >
            {icon}
        </Button>
    );
};

const defaultIcon = <DownloadIcon />;

const sanitizeRestProps = ({
    basePath,
    filterValues,
    resource,
    ...rest
}) =>
    rest;

ExportButton.propTypes = {
    basePath: PropTypes.string,
    exporter: PropTypes.func,
    filterValues: PropTypes.object,
    label: PropTypes.string,
    maxResults: PropTypes.number,
    resource: PropTypes.string,
    sort: PropTypes.exact({
        field: PropTypes.string,
        order: PropTypes.string,
    }),
    icon: PropTypes.element,
};

export default ExportButton;

Answer 2

你需要在 CustomListActions 中创建 react-admin <ExportButton filter={{ ...filterValues, ...permanentFilter }} /> 你可以从 props o CustomListActions 访问 filterVaues 和 PermanentFilter 对象