I am using react-query. I have a mutation and 2 queries where the second query depends on the data from the first query. This means that if I invalidate the first query, the second query is also invalidated since the data from the first query are the keys for the second one.
The Mutation that Invalidates the First Query:
export const useUpdateCampaign = () => {
const queryClient = useQueryClient();
return useMutation({
onSuccess: ({ id }) => {
queryClient.invalidateQueries({ queryKey: ['campaigns', id]});
},
mutationFn: (
data: UpdateCampaignRequest
) => BoostClient.getInstance().updateCampaign(data),
})
}
The First Query:
export const useGetCampaignDetails = (campaignId: string) => {
return useQuery({
queryKey: ['campaigns', campaignId],
queryFn: () => BoostClient.getInstance().getCampaign({ campaignId }),
})
}
The Second (Dependent on the First) Query:
export const useGetIncentivesDetails = (perkIds?: Array<string>) => {
return useQuery({
queryKey: ['incentives', perkIds],
queryFn: () => PerkCollectionsClient.getInstance().getMarketplacePerks({
limit: 10000,
searchById: perkIds
}),
enabled: !!perkIds?.length,
});
}
How I Use Them in the Component:
const { data: campaignDetails, isLoading: isCampaignDetailsLoading } = useGetCampaignDetails(id || '');
const incentives = campaignDetails?.data.incentives.map(perk => String(perk.perk));
const { data: perks, isLoading: isPerksLoading } = useGetIncentivesDetails(incentives);
The Problem:
isPerksLoading is always true both on the first data request and on subsequent ones (when the second query is triggered automatically). Is this expected behavior? It seems that on subsequent requests, isLoading should be false, and isFetching should be true.
My Goal: I want to show a skeleton loader on the first data load and a regular spinner on subsequent ones (when the data is already there)
Specific Settings:
staleTime: Infinity in the query client configuration, but this does not seem to affect the values I described above.
Question: Is this the expected behavior? If not, how can I achieve the desired behavior of showing different loaders on the initial and subsequent requests for dependent queries?
- I tried to trigger
refetchfunction manually for dependent query and in this caseisLoadingis false andisFetchingandisRefetchingtrue