[React Query] Query key 개념

Query key 개념

 

쿼리 키(queryKey)는 데이터를 식별하는 데 사용되는 고유한 식별자이다.

이 키는 useQuery, useMutation, useQueryClient 등의 훅에서 사용되며, 데이터를 가져오거나 캐시된 데이터를 식별하는 데 필요하다.

 

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

 

post id 별로 comments가 다르기 때문에 아래와 같이 쿼리를 사용하면 모든 쿼리가 comments 쿼리 키를 동일하게 사용하게된다.

이렇게 comments 같이 알려진 쿼리 키가 있을 때는 어떠한 트리거가 있어야만 데이터를 다시 가져오게 된다.

예를 들어 컴포넌트를 다시 마운트하거나 윈도우를 다시 포커스할 때 혹은 Mutation을 생성한 뒤 쿼리를 무효화할 시

등 클라이언트의 데이터가 서버의 데이터와 불일치할 때 리페칭이 트리거 된다.

 

쿼리는 post id를 포함하기 때문에 쿼리별로 캐시를 남길 수 있으며 comments 쿼리에 대한 캐시를 공유하지 않아도 된다.

각 게시물에 대한 쿼리에 라벨을 설정하여 각 쿼리에 해당하는 캐시를 만들 수 있다.

  const { data, isLoading, isError, error } = useQuery(

    ["comments", post.id],

    () => fetchComments(post.id)

  );

바로 쿼리 키에 문자열 대신 배열을 전달하면 가능하다.

쿼리 키를 쿼리에 대한 의존성 배열로 취급하게 된다.

따라서 쿼리 키가 변경되면  post.id가 업데이트되면 React Query가 새 쿼리를 생성해서 staleTime과 cacheTime을 가지게 되고 의존성 배열이 다르다면 완전히 다른 것으로 간주된다.