Как оптимизировать запрос данных?

Question

[gooseNjuice ()]

Всем привет. В написанной мной админке есть три кнопки генерации csv-отчётов (запрашиваем данные с сервера и сохраняем в формат таблицы).

у меня всё происходит относительно быстро

но вот у пользователя по какой-то причине проблемы. Периодически он заходит и кликает на одну из кнопок, и у него скачивается пустой отчёт. Как можно пофиксить это?
Вот (сокращенный) код компонента:

Reports.js

const Reports = () => {
    const accountContext = useContext(AccountContext);
    const {accounts, preorders} = accountContext;
    const {saveAsCsv} = useJsonToCsv();
const data = accounts;
    const [users, setUsers] = useState([])

    useEffect(async () => {
        const res = await axios.get('/api/accounts/admin/users-with-coupons')
        const data = res.data.map(elem => {
            return Object.fromEntries(Object.entries(elem).map(entry => {
                return (entry[0] == "couponCode") ? [entry[0], entry[1].toUpperCase()] : [entry[0], entry[1]];
            }))
        })
        setUsers(data)
        await accountContext.getAllAccounts();
        await accountContext.getPreorders();
    }, []);
    const getAccounts = () => {
        const date = new Date();
        const time = `${date.getDate()}-${date.getMonth() + 1}-${date.getFullYear()}_${
            date.getHours()}-${date.getMinutes()}-${date.getSeconds()}`;
        const filename = `UP-Accounts-Report-${time}`;
        saveAsCsv({data, fields, filename});
    }
    const getPreorders = () => {
        const fields = fields0;
        const data = preorders.map(elem => {
            return Object.fromEntries(Object.entries(elem).map(entry => {
                    return (entry[1]) ? [entry[0], (entry[1] + "").replaceAll('\n', ' ').replaceAll(',', "")] : [entry[0], entry[1]];
                }
            ))
        })
        // console.log(data)
        const date = new Date();
        const time = `${date.getDate()}-${date.getMonth() + 1}-${date.getFullYear()}_${
            date.getHours()}-${date.getMinutes()}-${date.getSeconds()}`;
        const filename = `UP-Preorders-Report-${time}`;
        console.log(preorders, fields, filename)
        saveAsCsv({data, fields, filename});
    }
    const getUsersCoupons = () => {
        const fields = fields1;
        const data = users;
        const date = new Date();
        const time = `${date.getDate()}-${date.getMonth() + 1}-${date.getFullYear()}_${
            date.getHours()}-${date.getMinutes()}-${date.getSeconds()}`;
        const filename = `UP-UsersCoupons-Report-${time}`;
        saveAsCsv({data, fields, filename});
    }
    return (
        <section className="d-flex flex-column justify-content-center align-items-start ps-5 pb-5">
            <h1 className='mainWindow__header'> Unplugged Admin - Reports</h1>

            <ReportItem title="Accounts report" handleClick={getAccounts}/>

            <ReportItem title="Preorders" handleClick={getPreorders}/>

            <ReportItem title="Users with coupons" handleClick={getUsersCoupons} isNew={true}/>
        </section>
    );
};

AccountState.js

const AccountState = props => {

    const getAllAccounts = async () => {
        try {
            const res = await axios.get('/api/accounts/admin');
            dispatch({
                type: GET_ALL_ACCOUNTS,
                payload: res.data
            });
        } catch (err) {
            dispatch({
                type: ACCOUNT_ERROR,
                payload: err.response
            });
        }
    };
    const getPreorders = async () => {
        try {
            const res = await axios.get('/api/accounts/admin/preorders');
            dispatch({
                type: GET_PREORDERS,
                payload: res.data
            });
        } catch (err) {
            dispatch({
                type: PREORDER_ERROR,
                payload: err.response
            });
        }
    };

    return (
        <AccountContext.Provider
            value={{
                accounts: state.accounts,
                account: state.account,
                loading: state.loading,
                error: state.error,
                preorders: state.preorders,
                getAllAccounts,
                getBunchAccounts,
                getPreorders,
                searchAccounts
            }}
        >
            {props.children}
        </AccountContext.Provider>
    );
};

Comments

[szQocks]

если я правильно понял то проблема в том что - иногда скачивается пустой отчет, проблема скорее всего со стороны сервера, и то что у тебя отрабатывает быстро - попробуй сделать запрос с более медленным интернетом(в настройках браузера), у меня было что-то похожее и причина была в том что я на сервере в одном месте не поставил await