쿼리 key의 중요성(다른 요청 시 값이 안바뀌는 문제)

리액트 쿼리에서는 key를 다르게 설정해야 다른 값으로 인지한다. 

위 사진은 Blog Posts의 글을 클릭하면 각각 다른 comments를 보여주는 사이트이다. 

잘못된 코드

  const { data, isLoading, isError, error } = useQuery("comments", () =>
    fetchComments(post.id)
  );

이 코드에서는 트리거가 발생했을 때만 data를 업데이트한다. 그렇기에 다른 블로그 제목을 클릭해도 같은 댓글이 나오게 된다.

해결 방법

  const { data, isLoading, isError, error } = useQuery(
    ["comments", post.id],
    () => fetchComments(post.id)
  );

이 경우 key를 ["comment", post.id]로 하면 쿼리 키를 쿼리에 대한 의존성 배열로 취급한다. 따라서 post.id가 변경되면 리액트 쿼리에서 새 쿼리를 생성하여 staleTime과 cacheTime을 가지게 된다. 이렇게 하면 모든 comments 쿼리가 같은 쿼리로 취급하지 않아 댓글 업데이트가 잘 될 것이다.

0으로 표시된 것은 이전에 로드되었던 댓글이다. 다른 게시물을 클릭하면 이전 댓글의 데이터는 비활성화된다. 그 이후 cacheTime 동안은 남아있다가 가비지로 수집된다.