Theo's Typesafe CultTTC
Theo's Typesafe Cult•2y ago
antoine

undefined `direction` for useInfiniteQuery

I got my input schema from https://trpc.io/docs/client/react/useInfiniteQuery, and fetchNextPage / fetchPreviousPage both show undefined for direction when called, but I'm expecting "forward" or "backward" from https://tanstack.com/query/latest/docs/framework/react/guides/query-functions#queryfunctioncontext. I'm using tRPC v11 and react table v8 to implement pagination. I'm not sure if I'm misunderstanding something here, but for now I'll define direction with useState separately. Here's how I'm using infinite queries (the Button is in a different file):
  const {
    data: discountCodes,
    isFetchingNextPage,
    isFetchingPreviousPage,
    isFetching,
    hasNextPage,
    hasPreviousPage,
    fetchNextPage,
    fetchPreviousPage,
  } = consoleApi.codes.getDiscountCodes.useInfiniteQuery(
    {
      limit: pagination.pageSize,
    },
    {
      getNextPageParam: ({ hasMoreNext, nextCursor }) => {
        return hasMoreNext ? nextCursor : null;
      },
      getPreviousPageParam: ({ hasMorePrev, prevCursor }) => {
        return hasMorePrev ? prevCursor : null;
      },
    },
  );

...
<Button
  onClick={() => {
                dataFetchNextPage();
                table.nextPage();
              }}
...
Query Functions | TanStack Query Docs
A query function can be literally any function that returns a promise. The promise that is returned should either resolve the data or throw an error.

All of the following are valid query function configurations:
Was this page helpful?