rising-crimson

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),
});

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),
});

10 Replies

gradual-turquoise•8mo ago

Could you share a Stackblitz or codesandbox with the error you have? By data(...) do you mean data.map?

rising-crimsonOP•8mo ago

Ah, you’re right — that was a typo on my part. However, the error occurs regardless of the typo. I’m sorry, but I can’t share the full code. Instead, I’ll attach a screenshot!

rising-crimsonOP•8mo ago

rising-crimsonOP•8mo ago

And here’s the code from my queries.

// reservation
import { getReservation, getReservations } from '@/services/api/reservation';
import { queryOptions } from '@tanstack/react-query';

export const reservationQueries = {
  all: ['reservation'],
  lists: () => [...reservationQueries.all, 'list'],
  list: ({ date, page = 1, per_page = 20 }: { date: string; page?: number; per_page?: number }) =>
    queryOptions({
      queryKey: [...reservationQueries.lists(), date],
      queryFn: () => getReservations({ date, page, per_page }),
    }),
  details: () => [...reservationQueries.all, 'detail'],
  detail: (serverId: number) =>
    queryOptions({
      queryKey: [...reservationQueries.details(), serverId],
      queryFn: () => getReservation(serverId),
    }),
};

// customer
import { getCustomer } from '@/services/api/customer';
import { queryOptions } from '@tanstack/react-query';

export const customerQueries = {
  all: ['customer'],
  details: () => [...customerQueries.all, 'detail'],
  detail: (customerId: number) =>
    queryOptions({
      queryKey: [...customerQueries.details(), customerId],
      queryFn: () => getCustomer(customerId),
    }),
};

// reservation
import { getReservation, getReservations } from '@/services/api/reservation';
import { queryOptions } from '@tanstack/react-query';

export const reservationQueries = {
  all: ['reservation'],
  lists: () => [...reservationQueries.all, 'list'],
  list: ({ date, page = 1, per_page = 20 }: { date: string; page?: number; per_page?: number }) =>
    queryOptions({
      queryKey: [...reservationQueries.lists(), date],
      queryFn: () => getReservations({ date, page, per_page }),
    }),
  details: () => [...reservationQueries.all, 'detail'],
  detail: (serverId: number) =>
    queryOptions({
      queryKey: [...reservationQueries.details(), serverId],
      queryFn: () => getReservation(serverId),
    }),
};

// customer
import { getCustomer } from '@/services/api/customer';
import { queryOptions } from '@tanstack/react-query';

export const customerQueries = {
  all: ['customer'],
  details: () => [...customerQueries.all, 'detail'],
  detail: (customerId: number) =>
    queryOptions({
      queryKey: [...customerQueries.details(), customerId],
      queryFn: () => getCustomer(customerId),
    }),
};

gradual-turquoise•8mo ago

Possible that you have duplicate customerId's across the pages of the reservation infinite query. Run a dedupe step when your spreading the reservations into the useQueries hook

rising-crimsonOP•8mo ago

But even if customerId is duplicated, shouldn’t it be fine as long as the data is already cached and no additional network request is made? Why is this error still occurring?

gradual-turquoise•8mo ago

That's true for individual useQuery hooks, which creates aqueryObserver. useQueries creates a queriesObserver (note the plural) and that's where the error is coming from.

rising-crimsonOP•8mo ago

Ah, I see. I’m still pretty new to using React Query, so I wasn’t sure. Thank you! Would it be correct to write it like the code below?

  const customerDetailQueries = useQueries({
    queries: Array.from(new Set(data.map((r) => r.customerId)))
      .filter((id) => !!id)
      .map((customerId) => ({
        ...customerQueries.detail(customerId),
        enabled: true,
      })),
    combine: (results) => results.map((result) => result.data),
  });

  const customerDetailQueries = useQueries({
    queries: Array.from(new Set(data.map((r) => r.customerId)))
      .filter((id) => !!id)
      .map((customerId) => ({
        ...customerQueries.detail(customerId),
        enabled: true,
      })),
    combine: (results) => results.map((result) => result.data),
  });

gradual-turquoise•8mo ago

Yup that looks perfect

rising-crimsonOP•8mo ago

Thank you so much! you really saved my time!

Gaming

Programming

Is it okay to use useInfiniteQuery and useQueries together?

Did you find this page helpful?