T
TanStack•2y ago
eastern-cyan

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
xenial-black
xenial-black•2y 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
eastern-cyan
eastern-cyan•2y 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
eastern-cyan
eastern-cyanOP•2y 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?