Theo's Typesafe Cult•2y 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•2y ago

remove the cursor argument

kenny•2y ago

I need it tho

Matvey•2y ago

it will be generated with getNextPageParam

kenny•2y ago

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

Matvey•2y ago

you don't need useInfiniteQuery then, just useQuery

kenny•2y ago

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

Glenn•2y 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•2y 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