병렬 쿼리

function App () {
  // The following queries will execute in parallel
  const usersQuery = useQuery(() => ({ queryKey: ['users'], queryFn: fetchUsers }))
  const teamsQuery = useQuery(() => ({ queryKey: ['teams'], queryFn: fetchTeams }))
  const projectsQuery = useQuery(() => ({ queryKey: ['projects'], queryFn: fetchProjects }))
  ...
}

실행해야 하는 쿼리 수가 변경되는 경우 수동 쿼리를 사용하면 반응성이 깨지므로 사용할 수 없습니다. 대신 TanStack Query는 원하는 만큼 많은 쿼리를 병렬로 동적 실행할 수 있는 useQueries 함수를 제공합니다.

useQueries는 값이 쿼리 객체 배열인 queries 키를 포함하는 옵션 객체를 반환하는 accessor를 받습니다. 쿼리 결과 배열을 반환합니다:

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