T
TanStack•3y ago
quickest-silver

How to perform enabled on useQueries

Hi, I'm receiving a response body and I want to run a series of queries on that request body using useQueries. However, I can't seem to find a way to only run useQueries when the response is not undefined. 
const vehicleQueries = useQueries({
    queries:
      userBookings.data.bookings?.map((item) => {
        return {
          queryKey: ["vehicle", item.vehicle_id, item.hotel_id],
          queryFn: () => fetchVehicle(item.vehicle_id, item.hotel_id),
          enabled: !!userBookings.data
        };
      }) ?? []
  });
const vehicleQueries = useQueries({
    queries:
      userBookings.data.bookings?.map((item) => {
        return {
          queryKey: ["vehicle", item.vehicle_id, item.hotel_id],
          queryFn: () => fetchVehicle(item.vehicle_id, item.hotel_id),
          enabled: !!userBookings.data
        };
      }) ?? []
  });
Current error. userBookings.data.bookings is undefined
1 Reply
extended-salmon
extended-salmon•3y ago
It looks like you need to check if the bookings exist before trying to map over them. You might want to only render the component that creates these queries if you already have the bookings data or possibly default to an empty array of queries (if that's valid and works, I haven't tested it) if the bookings don't exist.

Did you find this page helpful?