쿼리 키

TanStack Query는 쿼리 키별로 캐싱을 관리합니다. 쿼리 키는 최상위 수준에서 배열이어야 하며, 쿼리 함수가 반환하는 데이터를 고유하게 설명해야 합니다.

단순 키

목록 리소스 또는 비계층적 데이터에는 단순한 키를 사용합니다:

createQueryController(this, {
  queryKey: ['todos'],
  queryFn: fetchTodos,
})

createQueryController(this, {
  queryKey: ['settings'],
  queryFn: fetchSettings,
})

변수가 포함된 키

쿼리가 가져오는 항목을 변경하는 변수는 포함합니다:

createQueryController(this, () => ({
  queryKey: ['todo', this.todoId],
  queryFn: () => fetchTodo(this.todoId),
}))

createQueryController(this, () => ({
  queryKey: ['projects', { page: this.page, filter: this.filter }],
  queryFn: () => fetchProjects({ page: this.page, filter: this.filter }),
}))

페이지네이션 예제에서는 다음과 같은 형태의 키를 사용합니다:

type ProjectsQueryKey = readonly ['projects', number, number, boolean]

function projectsQueryKey(
  page: number,
  delayMs: number,
  forceError: boolean,
): ProjectsQueryKey {
  return ['projects', page, delayMs, forceError] as const
}

결정적 해싱

쿼리 키 내부에서는 객체 키 순서가 중요하지 않습니다:

const keyA = ['todos', { status, page }]
const keyB = ['todos', { page, status }]

배열 항목의 순서는 중요합니다:

const keyA = ['todos', status, page]
const keyB = ['todos', page, status]

의존성으로 사용하는 쿼리 키

쿼리 함수가 반응형 호스트 속성을 읽는 경우 해당 값을 쿼리 키에 포함합니다:

class UserTodos extends LitElement {
  userId = ''

  private readonly todos = createQueryController(this, () => ({
    queryKey: ['todos', this.userId],
    queryFn: () => fetchTodos(this.userId),
  }))
}

이를 통해 Lit Query는 각 사용자의 할 일을 별도로 캐시하고 호스트 상태가 변경될 때 다시 가져올 수 있습니다.