2 replies

undefined `direction` for useInfiniteQuery

I got my input schema from https://trpc.io/docs/client/react/useInfiniteQuery, and

fetchNextPage

fetchNextPage

fetchPreviousPage

fetchPreviousPage

both show undefined for

direction

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:

TTC

Theo's Typesafe Cult•2y ago•

2 replies

antoine

undefined `direction` for useInfiniteQuery

I got my input schema from https://trpc.io/docs/client/react/useInfiniteQuery, and

fetchNextPage

fetchNextPage

fetchPreviousPage

fetchPreviousPage

both show undefined for

direction

direction

  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

undefined `direction` for useInfiniteQuery

Similar Threads

undefined `direction` for useInfiniteQuery

Similar Threads

Similar Threads

Similar Threads