useInfiniteQuery's enabled option in React Query doesn't work

Viewed 389

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.

"

1 Answers

I had a similar issue and have found that it was fetchNextPage() that triggered fetching despite {enabled: false} option.

You can add a condition whenever you use fetchNextPage(), e. g.

if ( !!currentCity && typeof selectedPoint !== 'undefined' ) {
    fetchNextPage()
}

Although I didn't find exactly this case in the documentation, it seems that one could rely on the description of "refetch" behavior. Anyway, I made a codesandbox example to test how this stuff works.

Related