15.2.2 배열 타입의 캐시 키

만약 요청 함수를 호출하는 상황에서 파라미터가 필요하다면 다음과 같이 구현합니다.

import {useQuery} from 'react-query';
                          
function Sample({id}) {
  const result = useQuery(['article', id], () => getArticle(id));
}

이 예시 코드에서는 id 값을 Props로 받아와 useQuery의 두 번째 인자에서 화살표 함수를 선언하여 그 내부에서 사용했습니다. 그리고 캐시 키를 배열 형태로 넣어줬습니다.

캐시 키는 문자열로만 이뤄질 수도 있고, 이와 같이 배열 타입으로 설정할 수도 있습니다. 배열 타입의 캐시 키를 사용할 때는 원소에 객체를 넣을 수도 있습니다. 다음과 같이 말이죠.

useQuery(['articles', { start: 0, limit: 10 }], () => ...)

객체를 넣을 때 객체 키의 순서는 신경 쓰지 않아도 됩니다. 다음 캐시 키는 모두 동일한 캐시 키로 간주됩니다.

useQuery(['articles', { start: 0, limit: 10 }], () => ...)
useQuery(['articles', { limit: 10, start: 0 }], () => ...)

만약 요청의 결과물이 특정 변수에 따라 달라진다면 꼭 캐시 키에 포함해야 합니다.