TanStackT
TanStack•10mo ago•
10 replies
dry-scarlet

Is it okay to use useInfiniteQuery and useQueries together?

Hello. I created a custom hook that uses both useInfiniteQuery and useQueries. There’s a component that needs to display data fetched with useInfiniteQuery combined with additional data fetched using useQueries, so I wrote it this way.

Is the following implementation of the custom hook a valid approach?
If it is valid, how can I resolve the following error?

[QueriesObserver]: Duplicate Queries found. This might result in unexpected behavior. Error Component Stack

const { data, fetchNextPage, hasNextPage, isFetchingNextPage, isLoading } = useInfiniteQuery({
  queryKey: [...reservationQueries.all, 'lists', selectedDate],
  queryFn: ({ pageParam = 1 }) =>
    getReservations({ date: selectedDate, page: pageParam as number, per_page: 20 }),
  initialPageParam: 1,
  getNextPageParam: (lastPage, _, lastPageParam) =>
    lastPage.hasNext ? (lastPageParam as number) + 1 : undefined,
});

const customerDetailQueries = useQueries({
  queries: data.map((reservation) => ({
    ...customerQueries.detail(reservation.customerId),
    enabled: !!reservation.customerId,
  })),
  combine: (results) => results.map((result) => result.data),
});
Was this page helpful?