[TanStakQuery] Querie keys

TansStack Query는 쿼리 키를 기반으로 쿼리 캐싱을 관리하는 것이 핵심입니다. 쿼리 키는 최상위 수준에서 배열이어야 하며, 단일 문자열이 포함된 배열처럼 단순할 수도 있고, 여러 문자열과 중첩된 객체로 구성된 배열처럼 복잡할 수도 있습니다. 쿼리 키가 직렬화 가능하고 쿼리 데이터에 고유한 것이면 사용할 수 있습니다!

간단한 쿼리 키(Simple Query Keys)

가장 간단한 형태의 키는 상수 값을 가진 배열입니다. 이 형식은 다음과 같은 경우에 유용합니다:

• 일반 List/Index 리소스
• 비계층적(Non-hierarchical) 리소스

// A list of todos
useQuery({ queryKey: ['todos'], ... })

// Something else, whatever!
useQuery({ queryKey: ['something', 'special'], ... })

변수가 있는 배열 키(Array Keys with variables)

쿼리에 데이터를 고유하게 기술하기 위해 더 많은 정보가 필요한 경우 문자열과 직렬화 가능한 객체들이 포함된 배열을 사용하여 데이터를 기술할 수 있습니다. 이는 다음과 같은 경우에 유용합니다:

• 계층적 또는 중첩된 리소스
  • 항목을 고유하게 식별하기 위해 ID, 인덱스 또는 기타 primitive를 전달하는 것이 일반적입니다.
• 추가 파라미터들이 있는 쿼리
  • 추가 옵션들의 객체를 전달하는 것이 일반적입니다.

/ An individual todo
useQuery({ queryKey: ['todo', 5], ... })

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

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

쿼리 키는 결정론적으로(deterministically) 해시됩니다!

즉, 객체의 키 순서에 관계없이 다음 쿼리는 모두 동일한 것으로 간주됩니다:

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

그러나 다음 쿼리 키는 동일하지 않습니다. 배열 항목 순서가 중요합니다!

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

쿼리 함수가 변수에 의존하는 경우 쿼리 키에 변수를 포함하세요.

쿼리 키는 가져오는 데이터를 고유하게 기술하므로 쿼리 함수에서 변경되는 모든 변수를 쿼리 키에 포함해야 합니다. 예를 들어:

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

Further reading

대규모 애플리케이션에서 쿼리 키를 구성하는 방법에 대한 팁은 Effective React Query Keys를 살펴보고 커뮤니티 리소스에서 Query Key Factory Package를 확인하세요.

Reference

• Queriy Keys | TanStack Query Docs