Theo's Typesafe Cult•9mo ago

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();
              }}
...

  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:

1 Reply

antoineOP•9mo ago

nevermind, seems to be fixed in the latest v11 beta

Gaming

Programming

undefined `direction` for useInfiniteQuery