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!

[duynhat369]

Thank you so much, this has taken almost a whole day of mine.

[n3ps]

Wow. Not easy to figure that out just from the vague error

[um1chc5]

Thank you so much, I just realize I make this mistake after almose 30 minutes debugging.

[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.

[uy-scuti100]

i have alsomist the same issue right now as wel i hope i can et a solution this is my rsc warpping the cclient component

import { fetchAllProducts } from "@/actions";
import {
dehydrate,
HydrationBoundary,
QueryClient,
} from "@tanstack/react-query";
import GridContainer from "./components/GridContainer";

// Define the expected parameter types
export type ParamsType = Promise<{
date?: string;
price?: string;
priceRange?: string;
categories?: string;
isNew?: string;
gender?: string;
onSale?: string;
clotheTypes?: string;
clotheSizes?: string;
shoeSizes?: string;
bagSizes?: string;
accessorySizes?: string;
}>;

export default async function Page({
searchParams,
}: {
searchParams: ParamsType;
}) {
const {
date,
price,
priceRange,
categories,
isNew,
onSale,
clotheTypes,
clotheSizes,
shoeSizes,
bagSizes,
accessorySizes,
gender,
} = await searchParams;

const filterConditions: string[] = ['_type == "products"'];
const orderConditions: string[] = [];

// Handle ordering based on date
if (date && date !== "none") {
	orderConditions.push(`_createdAt ${date}`);
}

// Handle ordering based on price
if (price && price !== "none") {
	orderConditions.push(`price ${price}`);
}

// Handle price range
if (typeof priceRange === "string") {
	const [min, max] = priceRange.split(",").map(Number);
	filterConditions.push(`price >= ${min} && price <= ${max}`);
}

// Handle category filtering
if (categories && typeof categories === "string") {
	const categoryArray = categories.split(",");
	const categoryConditions = categoryArray.map(
		(cat) =>
			`count(categories[_type == "reference" && references(*[_type == "category" && name == "${cat}"]._id)]) > 0`
	);
	filterConditions.push(`(${categoryConditions.join(" || ")})`);
}

// Handle "isNew" filter
if (isNew === "true") {
	filterConditions.push("isNew == true");
}

// Handle "onSale" filter
if (onSale === "true") {
	filterConditions.push("onSale == true");
}

// Handle gender filter
if (gender) {
	filterConditions.push(`gender == "${gender}"`);
}

// Handle clothe types filter
if (clotheTypes && typeof clotheTypes === "string") {
	const typesArray = clotheTypes.split(",");
	const typeConditions = typesArray.map(
		(type) =>
			`count(clotheTypes[_type == "reference" && references(*[_type == "clotheType" && name == "${type}"]._id)]) > 0`
	);
	filterConditions.push(`(${typeConditions.join(" || ")})`);
}

// Handle size filters
const handleSizeFilter = (sizes: string | undefined, type: string) => {
	if (sizes && typeof sizes === "string") {
		const sizesArray = sizes.split(",");
		const sizeConditions = sizesArray.map(
			(size) =>
				`count(${type}[_type == "reference" && references(*[_type == "${type.slice(0, -1)}" && name == "${size}"]._id)]) > 0`
		);
		filterConditions.push(`(${sizeConditions.join(" || ")})`);
	}
};

handleSizeFilter(clotheSizes, "clotheSizes");
handleSizeFilter(shoeSizes, "shoeSizes");
handleSizeFilter(bagSizes, "bagSizes");
handleSizeFilter(accessorySizes, "accessorySizes");

// Construct the final filter and order queries
const filter = `*[${filterConditions.join(" && ")}]`;
const order = orderConditions.length
	? ` | order(${orderConditions.join(", ")})`
	: "";

const finalQuery = filter + order;

const PRODUCTS_PER_PAGE = 12; // Define the same limit as in GridContainer
const start = 0; // Start with the first page

const queryClient = new QueryClient();
await queryClient.prefetchQuery({
	queryKey: ["INFINITE_PRODUCTS", finalQuery],
	queryFn: () => fetchAllProducts(finalQuery, start, PRODUCTS_PER_PAGE),
});

return (
	<HydrationBoundary state={dehydrate(queryClient)}>
		<GridContainer order={finalQuery} />
	</HydrationBoundary>
);

}

and this is my client comonent

"use client";

import { fetchAllProducts, IProduct } from "@/actions";
import { useInfiniteQuery } from "@tanstack/react-query";
import { useEffect } from "react";
import { useInView } from "react-intersection-observer";
import ProductGrid from "./ProductGrid";

const PRODUCTS_PER_PAGE = 12;

interface ProductGridProps {
order: string;
}

interface ProductsPage {
products: IProduct[];
hasMore: boolean;
}

export default function GridContainer({ order }: ProductGridProps) {
const { ref, inView } = useInView({
threshold: 0,
});

const fetchProducts = async ({ pageParam = 0 }) => {
	try {
		const start = pageParam * PRODUCTS_PER_PAGE;
		const products = await fetchAllProducts(order, start, PRODUCTS_PER_PAGE);

		// Ensure products is an array, if not return empty array
		const safeProducts = Array.isArray(products) ? products : [];

		return {
			products: safeProducts,
			hasMore: safeProducts.length === PRODUCTS_PER_PAGE,
		};
	} catch (error) {
		console.error("Error fetching products:", error);
		return {
			products: [],
			hasMore: false,
		};
	}
};

const {
	data,
	error,
	fetchNextPage,
	isLoading,
	isError,
	hasNextPage,
	isFetching,
	isFetchingNextPage,
	status,
} = useInfiniteQuery({
	queryKey: ["INFINITE_PRODUCTS", order],
	queryFn: fetchProducts,
	initialPageParam: 0,
	getNextPageParam: (lastPage, pages) => {
		// Add null check for lastPage
		if (!lastPage || !Array.isArray(lastPage.products)) return undefined;
		return lastPage.hasMore ? pages.length : undefined;
	},
});

// Add more safety checks when flattening products
const allProducts =
	data?.pages?.reduce((acc, page) => {
		if (page && Array.isArray(page.products)) {
			return [...acc, ...page.products];
		}
		return acc;
	}, [] as IProduct[]) ?? [];

useEffect(() => {
	if (inView && hasNextPage && !isFetchingNextPage) {
		fetchNextPage();
	}
}, [inView, fetchNextPage, hasNextPage, isFetchingNextPage]);

return (
	<section className="pt-20 w-full px-5">
		<ProductGrid
			products={allProducts}
			isLoading={isLoading}
			isError={isError}
		/>

		{/* Loading spinner for next page */}
		{isFetchingNextPage && (
			<div className="w-full flex justify-center py-8">
				<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-gray-900" />
			</div>
		)}

		{/* Intersection observer target */}
		<div ref={ref} className="h-10 w-full" aria-hidden="true" />

		{/* End of results message */}
		{!hasNextPage && allProducts.length > 0 && (
			<p className="text-center text-gray-500 py-8">
				No more products to load
			</p>
		)}
	</section>
);

}

and this is the function ttself thats being called

export async function fetchAllProducts(
query: string,
start: number = 0, // Default to 0 if not provided
limit: number = 12 // Default to 12 if not provided
): Promise<IProduct[]> {
const ALL_PRODUCTS_QUERY = ${query}[${start}...${start + limit}] { _id, name, "slug": slug.current, "categories": categories[]->name, "lqips": images[].asset->metadata.lqip, price, isNew, onSale, inStock, discountedPrice, _createdAt, "imageUrls": images[].asset->url, };

try {
	console.log("Fetching products with:", {
		query,
		start,
		limit,
		fullQuery: ALL_PRODUCTS_QUERY,
	});

	const products = await client.fetch<IProduct[]>(ALL_PRODUCTS_QUERY);
	console.log("Fetched products:", {
		length: products?.length,
		isArray: Array.isArray(products),
		firstProduct: products?.[0],
	});
	// console.log(products);

	return products || [];
} catch (error) {
	console.error("Error fetching products:", error);
	return [];
}

}

everything works fine , i get the necessary data , except that i keep getting this eroor ,

i have treid to handle all undeifned properties and null checks , but still the same issue,

i hoe i can get some help

[uy-scuti100]

oh this https://tkdodo.eu/blog/effective-react-query-keys#caching-data solved my problem , i just added this to the infiniteQuery queryKey: ["CONTINOUS_INFINITE_PRODUCTS", order], and it worked , i was passing same querykey to both the initial fetch and the useInfiniteQuery.

i'll still be more than happy if i can get suggestions on how to optimize my code , incase if im doing some redundancy or over optimizing things, i stand an WANT to be corrected. Thanks guys

[afonsocardz]

v5.83.0

I have two places where I call fetchNextPage, the call from search button crashes with the error above in comments.

But when I call it from another button it fetchs data without error, unique queryKey been used

export default function SearchModal<T>({
    title,
    subTitle,
    searchFunction,
    setSearchResult,
    initialData,
    searchFields,
    offlineSearch = false,
    children,
    isOpen,
    onClose,
}: SearchModalProps<T>) {
    const [searchText, setSearchText] = useState('');
    const queryKey = [`search-${title}`, searchText];
    const { data, isLoading, status, fetchNextPage, refetch } = useInfiniteQuery({
        queryKey,
        queryFn: async ({ pageParam }) => {
            if (!searchText) return { nextPageParam: null, data: initialData ?? [] };
            return await searchFunction(searchText, pageParam);
        },
        getNextPageParam: (lastPage) => lastPage.nextPageParam,
        initialPageParam: null,
        enabled: false,
    });

    const items = useMemo(() => data?.pages?.flatMap((page) => page.data) ?? [], [data]);

    const filterResult = () => {
        const sanitizedText = sanitizeString(searchText).toLowerCase();
        if (initialData) {
            const result = initialData.filter(
                (item) =>
                    searchFields.some((field) => {
                        return (
                            item[field.key] &&
                            sanitizeString(String(item[field.key]))
                                .toLowerCase()
                                .includes(sanitizedText)
                        );
                    }) || !searchText,
            );
            return result;
        }
    };

    const onSearch = async () => {
        if (!offlineSearch) refetch();
        else {
            const result = filterResult();
            queryClient.setQueryData(queryKey, result);
        }
    };
    function resulLabelHandler() {
        const resultSize = items.length;
        let registro = 'registro';
        let encontrado = 'encontrado';

        if (resultSize > 1) {
            registro += 's';
            encontrado += 's';
        }

        const defaultText = `${registro} ${encontrado}`;

        if (resultSize > 0) return `${resultSize} ${defaultText}`;
        else return `Nenhum ${defaultText}`;
    }

    useEffect(() => {
        setSearchResult(items);
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, []);

    useEffect(() => {
        setSearchText('');
        refetch().then(({ data }) => {
            if (data) {
                const items = data.pages.flatMap((page) => page.data);
                setSearchResult(items);
            }
        });

        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, []);

    return (
        <Modal
            open={isOpen}
            size='sm'
            onClose={() => onClose && onClose()}
            header={
                <div>
                    <h4>{title}</h4>
                    <p>{subTitle}</p>
                </div>
            }
            content={
                <>
                    <form
                        onSubmit={(e) => {
                            e.preventDefault();
                            onSearch();
                        }}
                        className='flex gap-2 items-center w-full'
                    >
                        <InputWrapper
                            inputProps={{
                                startAdornment: <HiOutlineSearch className='text-lg' />,
                            }}
                            size='small'
                            className='w-full'
                            value={searchText}
                            onChange={(e) => setSearchText(e.target.value)}
                            placeholder='Digite para pesquisar'
                        />
                        <Button
                            size='sm'
                            data-testid={'btn-search-modal'}
                            icon={<BsSearch />}
                            type='submit'
                            variant='solid'
                        ></Button>
                    </form>

                    <div className='mt-4'>
                        {status === 'success' && (
                            <p className='font-semibold uppercase text-xs mb-4'>
                                {resulLabelHandler()}
                            </p>
                        )}
                        <div className='overflow-y-auto h-80 mb-6'>
                            <ScrollBar data-testid={'list-search-customer'}>
                                {isLoading ? (
                                    <span>Carregando...</span>
                                ) : typeof children === 'function' ? (
                                    children({ searchText })
                                ) : (
                                    <>
                                        {children}
                                        <Button onClick={() => fetchNextPage()}>
                                            Carregar mais
                                        </Button>
                                    </>
                                )}
                            </ScrollBar>
                        </div>
                    </div>
                </>
            }
        />
    );
}