Generic custom useInfiniteQuery hook

[mostafaegouda]

I know Dominik generally recommends to not have custom queries that accept all options, but in this case. the custom hook should accept all options as it is quite generic.

So i this the correct way to type it?

import {  useInfiniteQuery, type QueryKey, type UseInfiniteQueryOptions } from "@tanstack/react-query";
import { useEffect } from "react";
import { useInView } from "react-intersection-observer";

export function useInfiniteQueryWithScrollPagination<TQueryFnData, TError, TData, TQueryKey extends QueryKey, TPageParam>(queryOptions: UseInfiniteQueryOptions<TQueryFnData, TError, TData, TQueryKey, TPageParam>) {
  const { ref, inView } = useInView();
  const infiniteQuery = useInfiniteQuery(queryOptions);
  useEffect(() => {
    if (inView && infiniteQuery.hasNextPage && !infiniteQuery.isFetchingNextPage) {
      infiniteQuery.fetchNextPage();
    }
  }, [inView, infiniteQuery.hasNextPage, infiniteQuery.isFetchingNextPage, infiniteQuery.fetchNextPage]);
  return { ...infiniteQuery, paginatorRef: ref };
}

When the generics are not passed, pageParam is infered as unknown, also when using options created infiniteQueryOptions(),
i get

Type 'Query<unknown, Error, InfiniteData<unknown, unknown>, readonly unknown[]>' is not assignable to type 'Query<FavouritesResponse, Error, InfiniteData<FavouritesResponse, number>, string[]>'.
              Types of property 'queryKey' are incompatible.
                The type 'readonly unknown[]' is 'readonly' and cannot be assigned to the mutable type 'string[]'.

[Om7035]

Excellent question — this is a very common pitfall when writing generic custom hooks around useInfiniteQuery.

Let’s break it down carefully 👇

---

🧠 The Core Issue

When you re-expose a generic React Query hook like useInfiniteQuery, TypeScript can lose the specific type inferences — especially for the queryKey (which becomes readonly unknown[]) and pageParam (which falls back to unknown) — unless you mirror the generics and constraints exactly.

That’s what’s happening in your case.

React Query’s internal UseInfiniteQueryOptions type expects the TQueryKey to be a readonly tuple (readonly unknown[]), but your call site is providing string[].
That’s why you get:

Type 'readonly unknown[]' is 'readonly' and cannot be assigned to the mutable type 'string[]'.

---

✅ Correct Typing Fix

You just need to make your generic parameters mirror React Query’s definitions exactly, keeping the readonly in place.
Try this:

import {
  useInfiniteQuery,
  type UseInfiniteQueryOptions,
  type UseInfiniteQueryResult,
  type QueryKey,
} from "@tanstack/react-query";
import { useEffect } from "react";
import { useInView } from "react-intersection-observer";

export function useInfiniteQueryWithScrollPagination<
  TQueryFnData,
  TError = unknown,
  TData = TQueryFnData,
  TQueryKey extends QueryKey = QueryKey,
  TPageParam = unknown
>(
  queryOptions: UseInfiniteQueryOptions<
    TQueryFnData,
    TError,
    TData,
    TQueryKey,
    TPageParam
  >
): UseInfiniteQueryResult<TData, TError> & { paginatorRef: (node?: Element | null) => void } {
  const { ref, inView } = useInView();

  const infiniteQuery = useInfiniteQuery(queryOptions);

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

  return { ...infiniteQuery, paginatorRef: ref };
}

---

🧩 Explanation of the Fix

• TQueryKey extends QueryKey = QueryKey ensures readonly compatibility (QueryKey is readonly unknown[]).
• Added = QueryKey and = unknown defaults for generics → this allows proper inference when the user doesn’t explicitly provide generics.
• Explicitly typed return value to merge the paginator ref cleanly with UseInfiniteQueryResult.
• Used void infiniteQuery.fetchNextPage() to avoid ESLint async warning.

---

💡 Optional Improvement

If you often use this pattern, you can simplify user-facing ergonomics by letting TS infer types directly from the options:

export function useInfiniteQueryWithScrollPagination<
  TQueryFnData,
  TError,
  TData,
  TQueryKey extends QueryKey,
  TPageParam
>(
  options: UseInfiniteQueryOptions<
    TQueryFnData,
    TError,
    TData,
    TQueryKey,
    TPageParam
  >
) {
  const { ref, inView } = useInView();
  const query = useInfiniteQuery(options);
  useEffect(() => {
    if (inView && query.hasNextPage && !query.isFetchingNextPage) {
      void query.fetchNextPage();
    }
  }, [inView, query.hasNextPage, query.isFetchingNextPage, query.fetchNextPage]);
  return { ...query, paginatorRef: ref };
}

Now TypeScript will infer everything cleanly when you pass queryOptions created elsewhere (like from infiniteQueryOptions()).