TanStackQuery (4) - Query Keys

 

 

 

TanStack Query는 기본적으로 쿼리 키에 따라 쿼리 캐싱을 관리한다.

단일문자열이 있는 배열처럼 간단할 수 있고, 여러 문자열과 중첩된 객체의 배열처럼 복잡할 수도 있다.

쿼리키가 고유하다면 사용할 수 있다.

 

간단한 쿼리 키 

키의 가장 간단한 형태는 상수 값을 가진 배열이다 

상수 임에도 소문자로 작성함에 주의

useQuery({ queryKey: ['todos'], ...)}
 또는
useQuery({ queryKey: ['something', 'special'], ...})

 

변수가 있는 배열 키

쿼리에 데이터를 고유하게 설명하는 데 더 많은 정보가 필요한 경우 문자열과 직렬화 가능한 개체의 개수가 잇는 배열을 사용하여 설명할 수 있다.

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

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

• 추가 매개변수가 있는 쿼리
  • 추가 옵션 객체를 전달하는 것이 일반적

useQuery({ queryKey: ['todo', 5, {preview: true }], ...})

 

쿼리 키는 결정적으로 해시된다

객체의 키 순서에 관계없이 다음 쿼리는 모두 동일한 것으로 처리된다

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),
    })
}

 

쿼리 키는 쿼리 함수에 대한 종속성으로 작용한다.

쿼리키에 종속 변수를 추가하면 쿼리가 독립적으로 캐시되고 변수가 변경될 때마다 쿼리가 자동으로 다시 패치된다.