T
TanStack•16mo ago
absent-sapphire

Tanstack Query pageParam typescript, readonly

This is my code: 
 const { data, isLoading, fetchNextPage, hasNextPage, isFetchingNextPage } =
    useInfiniteQuery<
      PropiedadesResponse,
      unknown,
      InfinitePropiedadesData,
      number
    >({
      queryKey: ["propiedades", sort, debouncedFilters],
      initialPageParam: 1,
      queryFn: ({ pageParam }: { pageParam: number }) =>
        getPageData(pageParam, sort, debouncedFilters),
      getNextPageParam: (lastPage) => {
        const { total, pageSize, pageCount } = lastPage.meta.pagination;
        const currentPage = Math.ceil(total / pageSize); 
        return currentPage < pageCount ? currentPage + 1 : undefined;
      },
      staleTime: 5 * 1000,
      enabled: !!filters.type,
    });
 const { data, isLoading, fetchNextPage, hasNextPage, isFetchingNextPage } =
    useInfiniteQuery<
      PropiedadesResponse,
      unknown,
      InfinitePropiedadesData,
      number
    >({
      queryKey: ["propiedades", sort, debouncedFilters],
      initialPageParam: 1,
      queryFn: ({ pageParam }: { pageParam: number }) =>
        getPageData(pageParam, sort, debouncedFilters),
      getNextPageParam: (lastPage) => {
        const { total, pageSize, pageCount } = lastPage.meta.pagination;
        const currentPage = Math.ceil(total / pageSize); 
        return currentPage < pageCount ? currentPage + 1 : undefined;
      },
      staleTime: 5 * 1000,
      enabled: !!filters.type,
    });
I keep getting the same TS error: Type 'number' does not satisfy the constraint 'readonly unknown[]'.ts(2344) ⚠ Error (TS2344) | Type does not satisfy the constraint readonly unknown[] . In the Tanstack Query Course I remember they talked about the value that pageParam will always be unknown but we can type it, right? 
(alias) useInfiniteQuery<PropiedadesResponse, unknown, InfinitePropiedadesData, number, unknown>(options: DefinedInitialDataInfiniteOptions<PropiedadesResponse, unknown, InfinitePropiedadesData, number, unknown>, queryClient?: QueryClient | undefined): DefinedUseInfiniteQueryResult<...> (+2 overloads)
import useInfiniteQuery
(alias) useInfiniteQuery<PropiedadesResponse, unknown, InfinitePropiedadesData, number, unknown>(options: DefinedInitialDataInfiniteOptions<PropiedadesResponse, unknown, InfinitePropiedadesData, number, unknown>, queryClient?: QueryClient | undefined): DefinedUseInfiniteQueryResult<...> (+2 overloads)
import useInfiniteQuery
3 Replies
statutory-emerald
statutory-emerald•16mo ago
generics for useInfiniteQuery are in this order (TQueryFnData, TError, TData, TQueryKey, TPageParam), you're giving number to querykey type which can only be an array, if you give number to the fifth one then you should be ok
probable-pink
probable-pink•16mo ago
I may be mistaken but I feel like I've seen Dominik suggest against manually typing like that. RQ has some widely impressive inference so you have quite a bit to duplicate
absent-sapphire
absent-sapphireOP•16mo ago
I think you are right, troywoy. Now i need to understand how to get the value for the current page here: getNextPageParam: (lastPage) => { const { pageCount } = lastPage.meta.pagination; return page < pageCount ? page + 1 : undefined; }, so i can work with page 100%. It is waaay better not to type and leverage inference

Did you find this page helpful?