1. 개요

querykey의 배열을 활용하여 특정 데이터만 받아오기

2. 사용

• api.js

export async function getPostsByUsername(username) {
  const response = await fetch(`${BASE_URL}/posts?username=${username}`);
  return await response.json();
}

• homepage.js

function HomePage() {
  const username = '임의지정';
  const { data: postsDataByUsername } = useQuery({
    queryKey: ['posts', username],
    queryFn: () => getPostsByUsername(username),
  });
  console.log(postsDataByUsername);
  
  return <div>홈페이지</div>;
}

queryKey의 배열에 지정한 이름을 넣어준다.
username에 대한 쿼리만 캐싱이 된다.

const { data: postsDataByUsername } = useQuery({ 
    queryKey: ['posts', username, { status: private }], 
    queryFn: () => getPrivatePostsByUsername(username) 
});

위 코드는 private 상태의 포스트만 받아올 수 있다.

queryFn에서 화살표 함수 형태로 아규먼트에 username을 전달해 줄 수 있다.

3. 응용

• 쿼리 키에 있는 username이라는 값을 이용하고 싶으면 다음과 같이 queryKey 배열의 1번 인덱스 요소를 아규먼트로 넣어준다.

const { data: postsDataByUsername } = useQuery({ 
    queryKey: ['posts', username], 
    queryFn: ({ queryKey }) => getPostsByUserId(queryKey[1]), 
});

• 쿼리 키에서 객체의 특정한 값을 가져와 활용할 수 있다.

const username = 'codeit';
const { data: postsDataByUsername } = useQuery({ 
    queryKey: ['posts', { username }], 
    queryFn: ({ queryKey }) => {
        const [key, { username }] = queryKey; 
        return getPostsByUserId(username);
    } 
});

주의사항

체를 쿼리 키로 전달하면 그 안에서는 순서에 상관없이 같은 값들을 가지고 있는 객체라면 같은 쿼리 키로 인식하지만, 배열을 쿼리 키로 전달하면 요소의 순서가 중요하다. 순서가 달라지면 다른 쿼리 키로 인식하기 때문에 배열의 요소로 쿼리 키를 지정할 경우 순서에 꼭 유의

// 다음 세 가지는 모두 같은 쿼리로 인식한다
useQuery({ queryKey: ['posts', { username, userEmail }], ... });
useQuery({ queryKey: ['posts', { userEmail, username }], ... });
useQuery({ queryKey: ['posts', { userEmail, username, other: undefined }], ... });

// 다음 세 가지는 모두 다른 쿼리로 인식한다
useQuery({ queryKey: ['posts', username, userEmail], ... });
useQuery({ queryKey: ['posts', userEmail, username], ... });
useQuery({ queryKey: ['posts', undefined, userEmail, username], ... });