Infinite query always refetch all pages

[Hos1g4k1]

Currently, I am implementing infinite scroll feature using your infinite query and I successfully integrated it. But, there is one issue. The desired behaviour is to refetch only the first page when user initiates the refetch action. This doesn't happen and all pages are refetched.

This is the query:

import { queryApi } from 'config/rtkQuery';
import { CatchesFeedItem } from './types';

const url = 'public_trips';

type GetCatchesFeedArgumentsType = {
  page?: number;
  per_page?: number;
};

type MetaType = {
  totalCount: number;
  pageCount: number;
  currentPage: number;
  perPage: number;
};

const catchesFeedApi = queryApi.injectEndpoints({
  endpoints: (build) => ({
    getCatchesFeed: build.infiniteQuery<
      { data: CatchesFeedItem[]; meta: MetaType },
      GetCatchesFeedArgumentsType,
      number
    >({
      infiniteQueryOptions: {
        initialPageParam: 1,
        getNextPageParam: (lastPage, allPages, lastPageParam) => {
          return lastPageParam + 1;
        },
      },
      query: ({ pageParam }) => ({
        url: url,
        method: 'get',
        params: {
          include: 'meta',
          page: pageParam || 1,
          per_page: 10,
        },
      }),
      transformResponse: (response: CatchesFeedItem[], meta: MetaType) => {
        return { data: response, meta: meta };
      },
      providesTags: ['CatchesFeed'],
    }),
  }),
  overrideExisting: true,
});

export const { useGetCatchesFeedInfiniteQuery } = catchesFeedApi;

In the documentation there is this sentence

If the cache entry is ever removed and then re-added, it will start with only fetching the initial page.

but I don't know what it means exactly and how to force this behaviour. Can you help me with this? I tried to invalidate the provided that and that doesn't work. Also, when I tried to reset the whole app state it worked but that's the overkill because I don't want to reset the whole state, just this small fraction.

[markerikson]

Yes, refetching all pages is an intentional design decision:

• https://redux-toolkit.js.org/rtk-query/usage/infinite-queries#refetching

This behavior matches React Query, and we based our implementation's behavior on React Query.

The "if the cache entry is removed" line describes what happens if no more components subscribe to that data and the cache entry is garbage-collected after timeout.

Can you clarify what you want to have happen by "refetch only the first page"? Is it that you have pageParams: ["a", "b", "c"] in memory, and you want to reload only "a" and keep "b" and "c"? Or is it that you want to remove all 3 pages and go back to just ["a"]?

[Hos1g4k1]

Thanks for your response.

Or is it that you want to remove all 3 pages and go back to just ["a"]?

This is my desired behaviour. Basically, I am implementing "pull to refresh" functionality and when user refresh the page I want to discard all pages and fetch only the first one.

[markerikson]

Okay, I think your best bet is to manually update the cache entry to clear out the existing pages and then refresh. Roughly>

const { refresh } = useInfinitePokemonQuery();

const handleRefresh = () => {
  dispatch(api.utils.updateQueryData("infinitePokemon", someArg, (draft) => {
    draft.pages = [];
    draft.pageParams = [];
  });
  refresh();
}

Since the cache entry will exist but will have no pages, the call to refresh() should then only fetch the first page. (haven't tried it, but ought to work.)

[Hos1g4k1]

Yeah, this works as expected. Thank you very much!