리액트 쿼리는 쿼리 키를 기반으로 데이터를 캐시에 저장한다.
홈 피드와 내 피드로 이루어져 있고, 홈 피드에서는 모든 포스트를 다 받아와서 보여주지만 내 피드에서는 사이트에 로그인한 특정 유저의 포스터만 보여줘야 한다고 하자.
그러면 다음과 같이 백엔드로부터 특정 유저의 포스트만 받아 오는 API함수가 필요하다.
export async function getPostsByUsername(username){
const response = await fetch(`${BASE_URL}/posts?username=${username}`);
return await reaponse.json();
}그러면 이렇게 가져온 데이터를 전체 포스트를 저장하고 있는 ['posts']쿼리 키와 구분되는 방식으로 특정 유저의 포스트 데이터만 따로 저장하면 좋다.
그럴 때 다음과 같이 계층적으로 쿼리 키를 지정하는 것이 가능하다.
function HomePage(){
const username = '특정이름';
const {data: postsDataBYUsername} = useQuery({
queryKey: ['posts', username],
queryFn: () => getPostsByUsername(username),
});
console.log(postsDataByUsername);
return <div> 홈페이지 </div>;
}
이렇게 하면 username에 대한 쿼리만 따로 캐싱이 가능하다.
이렇게 배열을 활용해 계층적인 쿼리 키를 설정하는 것이 가능하다.
상황에 따라 다양한 파라미터를 활용해 쿼리 키를 설정할 수 있다.
