Я использую react-query. У меня есть мутация и 2 запроса, где второй запрос зависит от данных из первого запроса. Это означает, что если я инвалидирую первый запрос, второй запрос также инвалидируется, поскольку данные из первого запроса являются ключами для второго.
На UI есть таблица с элементами, которые можно с нее удалять. По нажатию на кнопку удаления я вызываю мутацию на удаление. Она в свою очередь инвалидирует квери, которая отдает айдишники элементов. Далее я этот массив айди отдаю во вторую квери, которая делает запрос на получение деталей по айдишникам.
Мутация удаления:
export const useUpdateCampaign = () => {
const queryClient = useQueryClient();
return useMutation({
onSuccess: ({ id }) => {
queryClient.invalidateQueries({ queryKey: ['campaigns', id]});
},
mutationFn: (
data: UpdateCampaignRequest
) => BoostClient.getInstance().updateCampaign(data),
})
}
Квери запроса айдишников элементов таблицы:
export const useGetCampaignDetails = (campaignId: string) => {
return useQuery({
queryKey: ['campaigns', campaignId],
queryFn: () => BoostClient.getInstance().getCampaign({ campaignId }),
})
}
Вторая квери:
export const useGetIncentivesDetails = (perkIds?: Array<string>) => {
return useQuery({
queryKey: ['incentives', perkIds],
queryFn: () => PerkCollectionsClient.getInstance().getMarketplacePerks({
limit: 10000,
searchById: perkIds
}),
enabled: !!perkIds?.length,
});
}
Как использую в компоненте с таблицей:
const { data: campaignDetails, isLoading: isCampaignDetailsLoading } = useGetCampaignDetails(id || '');
const incentives = campaignDetails?.data.incentives.map(perk => String(perk.perk));
const { data: perks, isLoading: isPerksLoading } = useGetIncentivesDetails(incentives);
Моя цель: я хочу показать скелетон-лоадер при первой загрузке данных (когда выполняются квери в первый раз) и обычный спиннер при последующих загрузках (когда данные уже есть).
Проблема: isPerksLoading всегда true как при первом запросе данных, так и при последующих (когда второй запрос запускается автоматически). Это ожидаемое поведение? Кажется, что при последующих запросах isLoading должен быть false, а isFetching должен быть true.
Специфические настройки: staleTime: Infinity в конфигурации клиента запроса, но это, похоже, не влияет на описанные выше значения.
Вопрос: Это ожидаемое поведение? Если нет, как я могу достичь желаемого поведения показа разных лоадеров при начального и последующих запросах для этих квери (вторая - зависимая от первой)?
