QueriesObserver

01무엇

QueriesObserver는 여러 쿼리를 한꺼번에 구독해 상태 변화를 받는 저수준 클래스다. QueryObserver가 쿼리 하나를 본다면, 이건 쿼리 배열을 본다. useQueries가 내부에서 이걸 쓴다.

QueryClient와 쿼리 옵션 배열을 넘겨 만든다. 옵션은 useQueries에 넘기는 것과 똑같다.

const observer = new QueriesObserver(queryClient, [
  { queryKey: ['post', 1], queryFn: fetchPost },
  { queryKey: ['post', 2], queryFn: fetchPost },
])

02무슨 일이 일어나나

QueriesObserver는 넘긴 쿼리마다 내부 옵저버를 하나씩 두고, 그 결과들을 배열로 모아 알린다. 어느 쿼리든 상태가 바뀌면 전체 결과 배열을 다시 만들어 구독자에게 넘긴다. 개수가 정해지지 않은 쿼리 목록을 동적으로 관찰할 때 쓰는 구조다.

React 어댑터인 useQueries는 이 옵저버를 하나 만들어 구독하고, 결과 배열이 바뀔 때마다 리렌더를 일으킨다. 옵저버 자체는 프레임워크를 모른다.

03사용법

옵저버를 만들고 subscribe로 결과 배열을 듣는다. subscribe는 구독 해제 함수를 돌려준다.

import { QueriesObserver, QueryClient } from '@tanstack/query-core'

const queryClient = new QueryClient()

const observer = new QueriesObserver(queryClient, [
  { queryKey: ['post', 1], queryFn: fetchPost },
  { queryKey: ['post', 2], queryFn: fetchPost },
])

const unsubscribe = observer.subscribe((results) => {
  // results는 쿼리마다 하나씩 담긴 결과 배열
  console.log(results.map((r) => r.data))
})

unsubscribe()

04실무 예시

거의 언제나 useQueries를 쓴다. QueriesObserver를 직접 만드는 건 React 밖에서 여러 쿼리를 한 번에 관찰해야 하는 특수한 통합에 한정된다 — 그때도 위 형태 그대로, 옵션만 useQueries와 맞춰 넘긴다.

05왜 중요한가

QueriesObserver는 useQueries의 내부 엔진으로, 개발자가 직접 부를 일은 거의 없다. 알아 두면 여러 쿼리를 동시에 다룰 때 무슨 일이 벌어지는지 그림이 잡히는 정도의 값이 있다. 직접 쓰는 건 React가 없는 환경에서 쿼리 목록을 관찰해야 하는 드문 경우뿐이다.

Reference