Running multiple queries based on search params

// in Page component
 const queryClient = new QueryClient()

  filters.forEach(async (id: string) => {
    await queryClient.prefetchQuery(queries.data.detail(id))
  })

return (
          <HydrationBoundary state={dehydrate(queryClient)}>
          <Suspense fallback={<div>Loading...</div>}>
            <DisplayData />
          </Suspense>
        </HydrationBoundary>
)

// client component
  const { data } = useSuspenseQueries({
    queries: filters.map((id) => ({
      ...queries.data.detail(id),
      staleTime: 1000 * 60 * 5,
      refetchInterval: 1000 * 60 * 5,
    })),
    combine: (results) => {
      return {
        data: results.map((result) => result.data).flat(),
        pending: results.some((result) => result.isPending),
      }
    },
  })