Theo's Typesafe Cult•13mo ago

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•13mo ago

remove the cursor argument

kenny•13mo ago

I need it tho

Matvey•13mo ago

it will be generated with getNextPageParam

kenny•13mo ago

ehh I need it inside of the trpc router also It's the pageNumber

Matvey•13mo ago

you don't need useInfiniteQuery then, just useQuery

kenny•13mo ago

but, pagination there is a load more button next to cursor, I want to pass trough more arguments

Glenn•13mo 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•13mo 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

Gaming

Programming

Type error when using useInfiniteQuery