Issue with Cache and Pagination in useInfiniteQuery

[rvndaputra]

Description

I am encountering an issue with caching and pagination using useInfiniteQuery. Here is the sequence of actions and the problem observed:

1. Fetch initial data with query {status: "new"}.
2. Change the filter and fetch new data with query {status: "new,approved,pending"}.
3. Go to the next page.
4. Navigate to another page and then return, fetching initial data again with query {status: "new"}.
5. Change the filter again to {status: "new,approved,pending"}. Instead of getting the previous data, when the query is done, all pages' data are overwritten by the first array, causing the next page to show the same data repeatedly.

Code

Here is the code snippet illustrating the issue:

import {
  InfiniteData,
  useInfiniteQuery,
  useQueryClient,
} from '@tanstack/react-query';
import queryString from 'query-string';
import { useEffect, useMemo } from 'react';
import { SupportTicketRoot, SupportTicketVariables } from '../../model';
import { NSupportTicket } from '../../model/support-ticket/types';
import normalizeSupportTicket from './normalizer';

type Dependencies = {
  variables?: SupportTicketVariables;
};

export const getSupportTicket = async (
  bodyParams?: string,
  qs?: string
): Promise<SupportTicketRoot> => {
...
};

const useSupportTicket = (deps?: Dependencies) => {
  const { variables } = deps || {};
  const { pageSize = 20, pageIndex = 0, ...rest } = variables || {};
  const queryClient = useQueryClient();
  const queryCache = queryClient.getQueryCache();

  const bodyParams = JSON.stringify(rest);
  const qs = queryString.stringify({ pageIndex, pageSize }, { encode: false });

  const cache = queryCache.find<InfiniteData<SupportTicketRoot>>({
    queryKey: ['support-tickets', bodyParams],
  });
  const pageParams = cache?.state.data?.pageParams;
  const pages = cache?.state.data?.pages;

  const {
    data,
    isPending,
    isFetchingNextPage,
    isFetchingPreviousPage,
    error,
    refetch,
    fetchNextPage,
  } = useInfiniteQuery<SupportTicketRoot>({
    queryKey: ['support-tickets', bodyParams],
    queryFn: () => getSupportTicket(bodyParams, qs),
    initialPageParam: pageIndex,
    getNextPageParam: (lastPage, allPages, lastPageParam, allPageParams) => {
      if ((lastPage.data || []).length < pageSize) {
        return undefined;
      }

      console.log({ lastPage, allPages, lastPageParam, allPageParams });

      return ((lastPageParam as number) || 0) + 1;
    },
  });

  useEffect(() => {
    if (pageParams && !pageParams.includes(pageIndex)) {
      fetchNextPage();
    }
  }, [fetchNextPage, pageIndex, pageParams]);

  return useMemo(() => {
    const normalized = (data?.pages || []).reduce(
      (acc: NSupportTicket[], curr) => {
        if (!curr.data) return acc;

        acc.push(...normalizeSupportTicket(curr));

        return acc;
      },
      []
    );

    return {
      data: normalized,
      loading: isPending || isFetchingNextPage || isFetchingPreviousPage,
      error,
      refetch,
    };
  }, [
    data,
    isPending,
    isFetchingNextPage,
    isFetchingPreviousPage,
    error,
    refetch,
  ]);
};

export default useSupportTicket;

Issue

The problem seems to stem from the cache behavior of useInfiniteQuery. When switching filters, the previous pages' data is being overwritten, causing the pagination to malfunction.

Expected Behavior

When changing the filter, the cache should update correctly without overwriting the previous pages' data, allowing pagination to work as expected.

Actual Behavior

Changing the filter causes all pages' data to be overwritten by the initial query's data, resulting in repetitive data on subsequent pages.

The bottom one is coming from getNextPageParam()

[TkDodo]

the cache entries are overwriting each other because you use the same queryKey. Everything used inside the queryFn must be part of the queryKey. You are using qs in the queryFn, but it's not part of the key.

[rvndaputra]

thanks, it's working well with this code

import { QueryFunctionContext, useInfiniteQuery } from '@tanstack/react-query';
import queryString from 'query-string';
import { useEffect, useMemo } from 'react';
import { SupportTicketRoot, SupportTicketVariables } from '../../model';
import { NSupportTicket } from '../../model/support-ticket/types';
import normalizeSupportTicket from './normalizer';

type Dependencies = {
  variables?: SupportTicketVariables;
};

const useSupportTicket = (deps?: Dependencies) => {
  const { variables } = deps || {};
  const { pageSize = 20, pageIndex = 0, ...rest } = variables || {};

  const bodyParams = JSON.stringify(rest);

  const getSupportTicket = async (context: QueryFunctionContext) => {
    const { pageParam } = context;
    const qs = queryString.stringify(
      { pageIndex: pageParam, pageSize },
      { encode: false }
    );

   ...
  };

  const {
    data,
    isPending,
    isFetchingNextPage,
    isFetchingPreviousPage,
    error,
    refetch,
    fetchNextPage,
  } = useInfiniteQuery<SupportTicketRoot>({
    queryKey: ['support-tickets', bodyParams],
    queryFn: getSupportTicket,
    initialPageParam: pageIndex,
    refetchOnWindowFocus: false,
    getNextPageParam: (lastPage, _allPages, lastPageParam) => {
      if ((lastPage.data || []).length < pageSize) {
        return undefined;
      }

      return ((lastPageParam as number) || 0) + 1;
    },
    getPreviousPageParam: (_firstPage, _allPages, firstPageParam) => {
      if ((firstPageParam as number) <= 1) {
        return undefined;
      }

      return (firstPageParam as number) - 1;
    },
  });

  useEffect(() => {
    fetchNextPage();
  }, [fetchNextPage, pageIndex]);

  return useMemo(() => {
    const normalized = (data?.pages || []).reduce(
      (acc: NSupportTicket[], curr) => {
        if (!curr.data) return acc;

        acc.push(...normalizeSupportTicket(curr));

        return acc;
      },
      []
    );

    return {
      data: normalized,
      loading: isPending || isFetchingNextPage || isFetchingPreviousPage,
      error,
      refetch,
    };
  }, [
    data,
    isPending,
    isFetchingNextPage,
    isFetchingPreviousPage,
    error,
    refetch,
  ]);
};

export default useSupportTicket;