react-query. How can I manage the isFetching state for the same query when it’s used in multiple com
There is query:
export const useGetClients = (params?: GetClientsRequest) =>
useQuery({
queryKey: ['clients', 'list', params],
queryFn: () => ClientClient.getClientApiInstance().getClients(params),
});
I have page with with 2 base components: table and button that opens sidebar.
Table:
const Wallets = () => {
const { wallets, isLoading, isFetching } = useGetWallets();
return (
<div>
<div>
<DepositFundsButton />
</div>
<DataTable
columns={Columns}
data={wallets}
isLoading={isLoading}
isFetching={isFetching}
/>
</div>
);
};
where:
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,
};
};1 Reply
absent-sapphireOP•2mo ago
When I click on deposit funds button sidebar with form opened. In the form I fetch the same query with the same params to provide options for the dropdown:
export const DepositFundsForm = ({ onClose }: DepositFundsFormProps) => {
const { data, isFetching: isClientsFetching } = useGetClients({
clientType: ClientType.Client,
});
return (
<form className="space-y-6 overflow-y-auto px-4">
<SelectField
options={clientOptions}
/>
</form>
);
};
Issue: I see 2 spinners - in table and in sidebar which seems not correct from UX perspective.
I see 3 solutions here:
- show spinner in table only if isAccountsFetching, not both isAccountsFetching || isClientsFetching
- pass additional query key from either table or sidebar to make 2 queries have different keys.
- wrap table and button with sidebar in context provider, fetch clients in provider and share data. There are 2 questions here: a) what should we display when clients fetching in provider? Skeleton instead of table? b) What if we want use sidebar with the form in other places? In this case I should always take care of wrapping it in the provider which sounds not ok.
So what is the best approach here from UX and code perspective?