공식 문서 : https://tanstack.com/query/v4/docs/guides/query-keys

Query Keys

기본적으로 React Query는 Query Keys를 기반으로 query caching을 관리한다. Query Keys는 최상위 수준의 배열이어야 하며, 단일 string이 있는 배열처럼 단순하거나 여러 문자열과 중첩된 객체의 배열처럼 복잡할 수도 있다. query key는 직렬화 할 수 있고, query data에 고유하다면 사용할 수 있다!

Simple Query Keys

key의 가장 단순한 형태는 상수값이 있는 배열이다. 이 형식은 다음에 유용하다 :

• Generic List(일반 목록) / Index resources(인덱스 리소스)
• Non-hierarchical resources (비계층적 리소스)

// A list of todos
useQuery(['todos'], ...)

// Something else, whatever!
useQuery(['something', 'special'], ...)

Array Keys with variables

쿼리에게 데이터를 고유하게 설명하는데 추가 정보가 필요하다면 문자열 및 여러개의 직렬화 가능한 객체가 포함된 배열을 사용하여 설명할 수 있다(1번 인덱스 값부터 query function 내부에 파라미터로 값이 전달됨). 이는 다음과 같은 경우에 유용하다 :

• 계층적 또는 중첩된 리소스
  항목을 고유하게 식별하기 위해 ID, 인덱스, 또는 기타 기본 정보를 전달하는것이 일반적

• 추가 파라미터가 있는 쿼리
  추가 옵션 객체를 전달하는것이 일반적

// An individual todo
useQuery(['todo', 5], ...)

// An individual todo in a "preview" format
useQuery(['todo', 5, { preview: true }], ...)

// A list of todos that are "done"
useQuery(['todos', { type: 'done' }], ...)

Query Keys are hashed deterministically!

객체의 키 순서에 상관없이 다음 쿼리들은 모두 동일하게 간주된다 :

useQuery(['todos', { status, page }], ...)
useQuery(['todos', { page, status }], ...)
useQuery(['todos', { page, status, other: undefined }], ...)

그러나 다음 쿼리 키 들은 같지 않다. 배열 item의 순서는 중요하다!

useQuery(['todos', status, page], ...)
useQuery(['todos', page, status], ...)
useQuery(['todos', undefined, page, status], ...)

If your query function depends on a variable, include it in your query key

쿼리 키는 fetching 데이터를 고유하게 설명하므로 query function의 변경되는 모든 변수를 포함해야 한다. 예를 들어 :

function Todos({ todoId }) {
  const result = useQuery(['todos', todoId], () => fetchTodoById(todoId))
}

Further reading

더 큰 애플리케이션에서 Query Key를 구성하는 방법에 대한 팁은 Community Resources의 Effective React Query Keys를 참고하라.