Ответ-запрос. Как я могу управлять состоянием isFetching для одного и того же запроса, когда он используется в нескольки ⇐ Javascript

[Anonymous]

Стек: React + ответный запрос
Есть запрос:

Код: Выделить всё

export const useGetClients = (params?: GetClientsRequest) =>
useQuery({
queryKey: ['clients', 'list', params],
queryFn: () => ClientClient.getClientApiInstance().getClients(params),
});

У меня есть страница с двумя базовыми компонентами: таблица и кнопка, открывающая боковую панель.
Таблица:

Код: Выделить всё

const Wallets = () => {
const { wallets, isLoading, isFetching } = useGetWallets();

return (






);
};

где:

Код: Выделить всё

export const useGetWallets = () => {
const {
data: accounts,
isLoading: isAccountsLoading,
isFetching: isAccountsFetching,
} = useGetLedgerAccounts();
const {
data: clients,
isLoading: isClientsLoading,
isFetching: isClientsFetching,
} = useGetClients({
clientType: ClientType.Client,
});

const accountsWithClientName: AccountWithClientName[] =
accounts && clients
? accounts.map((account) => ({
...account,
context: {
...account.context,
...(account.context.clientId && {
clientName: clients.clients.find(
(client) => client.id === account.context.clientId,
)?.name,
}),
},
}))
: [];

return {
wallets: accountsWithClientName,
isLoading: isAccountsLoading || isClientsLoading,
isFetching: isAccountsFetching || isClientsFetching,
};
};

Когда я нажимаю кнопку внесения средств на боковую панель, открывается форма. В форме я получаю тот же запрос с теми же параметрами, чтобы предоставить параметры для раскрывающегося списка:

Код: Выделить всё

export const DepositFundsForm = ({ onClose }: DepositFundsFormProps) => {
const { data, isFetching: isClientsFetching } = useGetClients({
clientType: ClientType.Client,
});

return (








Cancel


Deposit



);
};

Проблема:
Я вижу 2 счетчика — в таблице и на боковой панели, что кажется неправильным с точки зрения UX.
Я вижу здесь 3 решения:

• показывать счетчик в таблице только в том случае, если isAccountsFetching, а не оба isAccountsFetching || isClientsFetching
• передавайте дополнительный ключ запроса из таблицы или боковой панели, чтобы два запроса имели разные ключи.
• обертывайте таблицу и кнопку боковой панелью в поставщике контекста, извлекайте клиентов в поставщике и делитесь данными. Здесь есть 2 вопроса: а) что мы должны отображать при подключении клиентов к провайдеру? Скелет вместо стола? б) Что делать, если мы хотим использовать боковую панель с формой в других местах? В этом случае мне всегда следует позаботиться о том, чтобы обернуть его в поставщика, что звучит не очень хорошо.

Итак, какой подход здесь лучше всего с точки зрения UX и кода?

Подробнее здесь: https://stackoverflow.com/questions/797 ... -when-it-s