React-Query useQueries hook to run useInfiniteQuery hooks in parallel

Question

I am new to React-Query, but I have not been able to find an example to the following question:

Is it possible to use useInfiniteQuery within useQueries?

I can see from the parallel query documentation on GitHub, that it's fairly easy to set-up a map of normal queries.

The example provided:

function App({ users }) {
  const userQueries = useQueries({
    queries: users.map(user => {
      return {
        queryKey: ['user', user.id],
        queryFn: () => fetchUserById(user.id),
      }
    })
  })
}

If I have an infinite query like the following, how would I be able to provide the individual query options, specifically the page parameter?:

  const ids: string[] = ['a', 'b', 'c'];

  const useGetDetailsById = () => {
    return useInfiniteQuery<GetDetailsByIdResponse, AxiosError>(
      ['getDetailsById', id],
      async ({ pageParam = '' }) => {
        const { data } = await getDetailsById(
          id, // I want to run queries for `id` in _parallel_
          pageParam
        );
        return data;
      },
      {
        getNextPageParam: (lastPage: GetDetailsByIdResponse) =>
          lastPage.nextPageToken,
        retry: false,
      }
    );
  };

TkDodo · Accepted Answer · 2022-10-29 16:23:50Z

1

No, I'm afraid there is currently no such thing as useInfiniteQueries.

answered Oct 29, 2022 at 16:23

TkDodo

30.4k5 gold badges84 silver badges99 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Michael Ozeryansky · Accepted Answer · 2023-10-30 03:47:58Z

I've solved this for my use case by using one useInifiniteQuery to handle paging, and the fetch function uses queryClient to get the array of network requests.

// Use ReactQuery to fetch array with cache
function fetchPage(
  queryClient: QueryClient,
  urls: string[],
  pageParam: PageParams
) {
  const requests = urls.map(url => {
    return queryClient
      .fetchQuery({
        queryKey: ['/api/endpoint', url],
        queryFn: () => fetchURL(url),
      })
      .catch(error => {
        throw error
      })
  })
  return Promise.all(requests)
}

// Component handles paging with one useInfiniteQuery
export default function Page() {
  const [urls, setUrls] = useState<string[]>([
    ...
  ])

  const queryClient = useQueryClient()
  const {
    data: pagedData,
    fetchNextPage,
    hasNextPage,
    isFetchingNextPage,
  } = useInfiniteQuery({
    queryKey: ['page', urls],
    queryFn: ({ pageParam }) => fetchPage(queryClient, urls, pageParam),
    initialPageParam: { ... },
    getNextPageParam: (lastPage, allPages, lastPageParam) => { ... }
    retry: Infinity,
  })

  const data = useMemo(() => {
    return pagedData?.pages...
  }, [pagedData])

  ...

Collectives™ on Stack Overflow

React-Query useQueries hook to run useInfiniteQuery hooks in parallel

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related