TTC
Theo's Typesafe Cult•3y ago
kenny

Type error when using useInfiniteQuery

Argument of type '{ cursor: number; location: string; }' is not assignable to parameter of type 'Omit<{ cursor: string; location: string; }, "cursor">'.
  Object literal may only specify known properties, and 'cursor' does not exist in type 'Omit<{ cursor: string; location: string; }, "cursor">'.
Argument of type '{ cursor: number; location: string; }' is not assignable to parameter of type 'Omit<{ cursor: string; location: string; }, "cursor">'.
  Object literal may only specify known properties, and 'cursor' does not exist in type 'Omit<{ cursor: string; location: string; }, "cursor">'.
That's the type error I am getting. I am using trpc with nextjs This is the query I am making: 
  const {
    data,
    isLoading,
    error,
    hasNextPage,
    isFetchingNextPage,
    fetchNextPage,
  } = api.products.getAllByLocationPaginated.useInfiniteQuery(
    { cursor: page, location },
    {
      enabled: locationSelected,
      getNextPageParam: (lastPage) =>
        lastPage.currentPage === lastPage.totalPages ? null : lastPage.nextPage,
      getPreviousPageParam: (page) => page.prevPage,
    }
  );
  const {
    data,
    isLoading,
    error,
    hasNextPage,
    isFetchingNextPage,
    fetchNextPage,
  } = api.products.getAllByLocationPaginated.useInfiniteQuery(
    { cursor: page, location },
    {
      enabled: locationSelected,
      getNextPageParam: (lastPage) =>
        lastPage.currentPage === lastPage.totalPages ? null : lastPage.nextPage,
      getPreviousPageParam: (page) => page.prevPage,
    }
  );
This is how it's handled on the trpc router: 
  getAllByLocationPaginated: publicProcedure
    .input(z.object({ location: z.string(), cursor: z.string() }))
    .query(async ({ input }) => {
      const { data } = await axios.get<{
        prevPage: number;
        currentPage: number;
        nextPage: number;
        totalPages: number;
        products: IProduct[];
      }>(
        `${baseUrl}/products/get-all-paginated-by-location-code/?pageNumber=${input.cursor}&warehouseCode=${input.location}`
      );

      if (!data) {
        throw new TRPCError({
          code: "NOT_FOUND",
          message: "Failed to fetch products!",
        });
      }

      return data;
    }),
  getAllByLocationPaginated: publicProcedure
    .input(z.object({ location: z.string(), cursor: z.string() }))
    .query(async ({ input }) => {
      const { data } = await axios.get<{
        prevPage: number;
        currentPage: number;
        nextPage: number;
        totalPages: number;
        products: IProduct[];
      }>(
        `${baseUrl}/products/get-all-paginated-by-location-code/?pageNumber=${input.cursor}&warehouseCode=${input.location}`
      );

      if (!data) {
        throw new TRPCError({
          code: "NOT_FOUND",
          message: "Failed to fetch products!",
        });
      }

      return data;
    }),
8 Replies
matvey
matvey•3y ago
remove the cursor argument
kenny
kennyOP•3y ago
I need it tho
matvey
matvey•3y ago
it will be generated with getNextPageParam
kenny
kennyOP•3y ago
ehh I need it inside of the trpc router also It's the pageNumber
matvey
matvey•3y ago
you don't need useInfiniteQuery then, just useQuery
kenny
kennyOP•3y ago
but, pagination there is a load more button next to cursor, I want to pass trough more arguments
Glenn
Glenn•3y ago
I think cursor get's added automatically... YOu trigger reloads on top/bottom of the data stored behind the hook and the cursor is kept automatically since "useInfiniteQuery" does that for you. You can manually provide a cursor/page upon fetching in the "fetchNextPage" call but that is completely optionally since the hook stores the amount and index of pages it retained
kenny
kennyOP•3y ago
is the cursor gets passed through automaticlly then how do I access it in my trpc router. I have found a solution I just use cookies to fetch the location and pass the cursor through normally

Did you find this page helpful?