React-Query : Query Key

React-Query : Query Key

·

2 min read

지금까지 만든 예시를 보면 게시글의 제목을 눌러도 하단의 Comments 는 모두 동일 한 것을 확인 할 수 있습니다.

예시 코드의 흐름을 살펴보면

  1. posts 에서 해당 게시글의 글을 누르면 state 의 값으로 post 의 data 가 들어가고

  2. 해당 state 는 props 를 통해서 PostDetail 컴포넌트로 전달이 됩니다.

  3. 그리고 PostDetail 컴포넌트에서는 useQuery 를 사용해 fetchComments 쿼리 함수가 props 로 전달받은 속성 중 id 값을 인수로 받아 비동기 함수를 실행 합니다.

  4. 결론적으로 해당 post.id 에 해당하는 comment 가 화면에 보여져야 합니다.

  5. 하지만 모든 글이 같은 comment 를 화면에 보여줍니다.

모든 같은 comment 가 보이는 이유는 ❓

image

위에 보이는 comments 쿼리 키는 오후 9시 59분에 마지막으로 업데이트가 되었습니다. 다른 게시물을 눌러도 변화하지 않으며, 데이터는 만료(stale) 되었고, 리패칭 또한 일어나지 않습니다.

궁극적인 이유는, 모든 쿼리가 comments 쿼리 키를 동일하게 사용하고 있기 때문 입니다.

예시처럼 comments 같이 알려진 쿼리 키가 있을 때는 어떠한 변화가 있어야만 데이터를 다시 가져오게 됩니다.

변화의 예시는

  1. 컴포넌트가 다시 마운트하거나, 윈도우를 다시 포커스 할 때

  2. useQuery에서 반환되어 수동으로 리패칭을 실행할 때

  3. 지정된 간격으로 리패칭을 자동 실행할 때

  4. 변이(Mutation) 을 생성한 뒤 쿼리를 무효화 할 때

✅ 하지만 위와 같은 상황말고 직접 명시 할 수 있는 방법이 있습니다.

Array as Query Key

쿼리 키에 문자열(String) 대신 배열(Array) 을 전달하면 가능 합니다.

carbon

➡️ 위와 같은 경우 배열의 첫 번째 요소로 문자열 "comment" 를 가지고, 두 번째 요소로 post.id 를 가집니다.

➡️ 쿼리 키를 쿼리에 대한 의존성 배열로 취급하게 됩니다.

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

즉,

  • fetchComments 에 전달한 것과 동일한 post.id 입니다.

  • post.id 가 의존성 배열로 작용하며 문자열 'comments' 에 식별자가 추가된 셈 입니다.

확인해보면

image (1)

개발자 도구를 보면 해당하는 댓글의 id 가 다 다른것을 볼 수 있습니다. ➡️ 이때 다른 게시물을 클릭하자마자 그 전의 쿼리가 비활성화 되는 것을 볼 수 있는데 아직 캐시에 있는 상태 입니다. ➡️ 가비지 컬렉터로 수집되기 전까지 캐시에 남아있을 것 입니다.

직접 확인해보기

다음 포스팅은 Pagination 에 대해 알아보겠습니다.


참고

https://react-query-v3.tanstack.com/

https://www.udemy.com/course/react-query-react/