[React-query] 리액트 쿼리 #3 - Query key 다루기

Query Key

• ❗️QueryKey를 기반으로 데이터 캐싱을 관리한다.
• 쿼리키는 문자열 또는 배열로 지정할 수 있다.
• 쿼리키를 배열로 지정하면 배열의 0번 값은 string으로 다른 컴포넌트에서 부를 키를 넣어주면 되고 1번째 값은 query함수의 파라미터로 전달될 값을 넣어주면 된다.

// 문자열
useQuery('todos', ...)
         
// 배열
useQuery(['todos', '1'], ...)

• ❗️쿼리가 변수에 의존하는 경우에는 Query Key에도 해당 변수를 추가해주어야 한다.

const router = useRouter();
const id = router.pathname

const { data, isLoading, error } = useQuery(['todos', id], () => axios.get(`http://.../${id}`));

• 첫번째 파라미터로 설정한 QueryKey는 다른 컴포넌트에서도 해당 키를 사용하면 호출 가능하다.

👀 콘솔에서 저장된 Query key를 확인

QueryKey는 string과 array 형태 중 어떤 것을 쓰면 좋을까❓
보통은 프로젝트 컨벤션에 따라 string or array 를 선택해서 사용하면 된다.
하지만, 배열형태로 작성하는 것을 권장한다. (어차피 string 타입으로 Query key를 작성해도 배열형태로 저장된다.

const query = useQuery("data", queryfn, {options});
// ["data"] 형태로 저장된다.