useInfiniteQuery throws Cannot read properties of undefined (reading 'length')

[korsunrodion]

Hi. I have this code:

export type TransactionHistoryData = {
  id: string;
  date: Moment;
  category: TransactionCategory;
  account: string;
  amount: number;
  direction: "in" | "out";
  name: string;
};

type UseTransactionsHistory = ({
  account,
  filters,
}: {
  account?: string;
  filters?: TransactionHistoryFitlers;
}) => UseInfiniteQueryResult<InfiniteData<TransactionHistoryData[]>, DefaultError>;

type TransactionQueryKey = [string, { pageParam?: number }?];

const useTransactionsHistory: UseTransactionsHistory = ({ account, filters }) => {
  const client = useQueryClient();

  const query = useInfiniteQuery<
    TransactionHistoryData[],
    DefaultError,
    InfiniteData<TransactionHistoryData[]>,
    TransactionQueryKey,
    number
  >({
    queryKey: ["transactionsHistory"],
    queryFn: ({ pageParam: pp = 1 }) => {
      const pageParam = pp as number;
      const data = account
        ? mockTransactionHistoryData.filter((item) => item.account === account)
        : mockTransactionHistoryData;

      if (!filters) {
        return promisifyTmpData(data.slice((pageParam - 1) * 10, pageParam * 10));
      }

      const filtered = data.filter((item) => {
        let passing = true;
        if (filters.transactionType) {
          const direction = filters.transactionType === "deposit" ? "in" : "out";
          passing = item.direction === direction;
        }
        return passing;
      });

      return promisifyTmpData(filtered.slice((pageParam - 1) * 10 + 1, pageParam * 10));
    },

    initialPageParam: 2,
    getNextPageParam: (lastPage: any, allPages: any, lastPageParam: any) => {
      console.log("11", lastPageParam);
      return 2;
    },
  });

  useEffect(() => {
    client.invalidateQueries({ queryKey: ["transactionsHistory"] });
  }, [account, filters]);

  return query;
};

export default useTransactionsHistory;

But an error is thrown in React-query's internal method, and getNextPageParam I passed as a prop doesn't seem to be called.

I don't see any errors in my code. I'll appreciate any help, thanks in advance.

[korsunrodion]

Don't know the cause, but changing queryKey solved the problem

[TkDodo]

you probably use that key already for non-infinite queries, see:

https://tkdodo.eu/blog/effective-react-query-keys#caching-data

[tomas-light]

Thank you, for your answer, it really helps me!

[Dysas]

After upgrading from version 4 to version 5, we also began encountering this issue. We checked our query key, which is used only once in the useInfiniteQuery method, but it is used more than once during manual cache updates using the setQueryData method.

[TkDodo]

then you are likely setting a wrong structure with setQueryData. Are you keeping the { pages, pageParams } top level object?

[Dysas]

Yes. Most changes are made in the "pages" object without changing the original top-level structure.

[TkDodo]

Then please show a minimal reproduction on stackblitz or codesandbox. From what I can see, I don’t think you should be seeing those errors if the structure in the cache is correct.