I got the tagsList with this query, and "enabled: !!points" worked properly.
const {
data: tagsList,
isLoading,
isFetched,
} = useQuery(EDiscountEndPoints.tags.key, discountEndpoints.tags, {
enabled: !!points,
onSuccess: (res) => {
const currentCityId = searchParams.get('cityId');
const currentTabId = searchParams.get('dTabId');
const firstCity = res.tags.find((item) => {
if (!!currentCityId) {
return item.id === parseInt(currentCityId);
} else {
return item.name === 'city';
}
});
const firstTab = currentTabId || 0;
if (firstCity) {
searchParams.set('cityId', `${firstCity.id}`);
searchParams.set('dTabId', `${firstTab}`);
setSearchParams(searchParams);
setCurrentCity({
label: firstCity.value,
cityId: firstCity?.id,
});
}
typeof points?.userPoint?.availablePoint === 'number' &&
setSelectedPoint(Math.floor(points?.userPoint?.availablePoint / 2));
},
});
after this, I used useInfiniteQuery with this condition.
enabled: !!currentCity && typeof selectedPoint !== 'undefined'
or
enabled: !!tagsList.length
const {
data: discounts,
fetchNextPage,
hasNextPage,
isFetching,
refetch,
} = useInfiniteQuery(
[EDiscountEndPoints.filteredList.key],
(originParams) => {
const tabs = tagsList?.tags.filter((item) => item.name !== 'city');
return discountEndpoints.filteredList(originParams, {
tags: [
// ...(!!currentCity ? [currentCity.cityId] : []),
...(!!searchParams.get('cityId')
? [parseInt(searchParams.get('cityId') as string)]
: []),
...(!!searchParams.get('dTabId') && !!tabs?.length
? [tabs[parseInt(searchParams.get('dTabId') as string)].id]
: []),
],
pointsTo: !!selectedPoint ? selectedPoint : 0,
});
},
{
// enabled: !!currentCity && typeof selectedPoint !== 'undefined',
enabled: false,
getNextPageParam: (lastPage, pages) => {
if (pages.length < lastPage.totalPages) {
return {
pagination: {
page: pages.length,
perPage: 10,
},
};
} else {
undefined;
}
},
cacheTime: 0,
}
);
but useInfiniteQuery's enabled option didn't work and the query was called in every condition, even when enabled = false.
in react-query's documentation, it has been mentioned that "The options for useInfiniteQuery are identical to the useQuery hook with the addition of the following...." So i think the enabled option in useInfiniteQuery should work like useQuery.
"