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

Question

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.

"

yes, it should work like in useQuery. can you show this behaviour in a codesandbox reproduction ? — TkDodo
– TkDodo, Commented Jun 25, 2022 at 19:38
@TkDodo Just ran into this. Alexey made a codesandbox: codesandbox.io/s/… — Slava Knyazev
– Slava Knyazev, Commented Feb 14, 2023 at 17:09
so is the issue that calling fetchNextPage will still fetch the next page even though the query is "disabled"? I did not get that from the initial issue, thanks for the reproduction. I think this is kinda intended, like you can also call refetch and it will bypass enabled. What enabled can disable is mostly the automatic fetches, and the ones that would target it incidentally, like invalidation. You have it under control to just not invoke that function if the query is disabled. — TkDodo
– TkDodo, Commented Feb 24, 2023 at 16:38

Alexey Tatuzov · Accepted Answer · 2022-07-08 13:35:21Z

4

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.

edited Jul 8, 2022 at 13:35

answered Jul 7, 2022 at 7:21

Alexey Tatuzov

412 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Slava Knyazev · Accepted Answer · 2023-02-15 03:28:31Z

1

A proper solution to detecting a disabled query is to build logic based on the rules presented in the docs: Disabling/Pausing Queries

When enabled is false:

If the query has cached data, then the query will be initialized in the status === 'success' or isSuccess state.

If the query does not have cached data, then the query will start in the status === 'loading' and fetchStatus === 'idle' state.

Accordingly, you need a check like this:

if (query.status === 'loading' && query.fetchStatus === 'idle') {
   // is disabled
} else {
  // is enabled
  query.fetchNextPage();
}

answered Feb 15, 2023 at 3:28

Slava Knyazev

6,0991 gold badge27 silver badges52 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related