Query Keys

본질적으로, TanStack Query는 query keys를 기반으로 query 캐싱을 관리한다. query keys는 top level의 배열이어야 하며, 단일 문자열이 포함된 배열처럼 단순하거나 많은 문자열 및 중첩 객체 배열처럼 복잡할 수 있다. query keys가 직렬화 가능하고, query keys의 데이터가 유니크 한 이상, 너는 사용할 수 있다!

1. 간단한 Query Keys

key의 가장 간단한 형태는 상수값이 포함된 배열이다. 이 형식은 유용하다. 다음의 경우:

• 일반 목록/인덱스 리소스
• Non-hierarchical resources (계층적이지 않은 리소스)

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

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

2. 변수가 있는 배열 Keys

query에서 데이터를 유니크하게 설명하기 위해 추가 정보가 필요할 때, 문자열이 있는 직렬화 가능한 객체를 원하는 수만큼 사용해서 설명할 수 있다. 이는 다음과 같은 경우에 유용하다.

• 계층적(Hierarchical) 또는 중첩된 자원
  • 아이템을 고유하게 식별하기 위해 ID, 인덱스 또는 기타 기본값을 전달하는 것이 일반적
• 추가적인 parameters와 함께인 Queries
  • 추가 옵션 객체를 전달하는것이 일반적

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

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

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

3. Query Keys는 결론적으로 해시 처리됨

즉, 객체 안에 key들의 순서와는 상관없이, 다음의 query들은 모두 동일한 것으로 간주한다.

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

그러나 다음 query keys는 동일하지 않습니다. 배열 요소의 순서가 중요합니다!

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

4. 쿼리 함수가 쿼리 키에 포함된 변수에 의존하는 경우

query keys는 가져오는 데이터를 고유하게 기술하기 때문에, 변경되는 모든 변수를 쿼리 함수에 포함해야 합니다. 예를 들면:

1
function Todos({ todoId }) {
2
  const result = useQuery({
3
    queryKey: ['todos', todoId],
4
    queryFn: () => fetchTodoById(todoId),
5
  })
6
}

query keys는 query 함수에 대해 종속적인 역할을 한다는 것에 알아두세요. 종속 변수를 query keys에 추가하면 query가 독립적으로 캐시되고, 변수가 변경될 때마다, query가 자동으로 refetch됩니다.(stableTime 설정에 따라) 자세한 내용과 예제는 전체 종속 변수 섹션을 참조하십시오.

• https://tanstack.com/query/latest/docs/react/eslint/exhaustive-deps

5. 더 알아보기

• 더 큰 응용 프로그램에서 query keys를 구성하는 방법에 대한 팁은 Effective React query keys, 8-effective-react-query-keys를 살펴보고
• 다음에서 쿼리 키 팩토리 패키지, query-key-factory를 확인하십시오