[RQ(11)]queryKey

문제

어떤 글을 눌러도 다 똑같은 comment가 나오고 있다.
=> queryKey 때문임

어떤 글을 써도 comments data가 stale 이고, refetch가 안된다.

• 모든 쿼리가 같은 key 를 쓰고 있음. ([comments])

• trigger가 있을 때만 refetch 된다.

  • 컴포넌트를 다시 mount 할 때,
  • 창을 다시 focus 할 때,
  • useQuery에서 반환된 refetch 함수를 수동적으로 실행할 때,
  • 지정된 간격에서 자동으로 재검색이 일어날 때,
  • mutation 후, 쿼리 무효화 (client data가 더이상 server data랑 일치하지 않음을 알게됨)

  여기 중 하나의 일이 아니기 때문에 data가 stale이여도 refetch가 안된다.

해결

• 블로그 post 1에 대한 comment를 캐시에서 제거할 필요 x (post 2 를 쿼리할 때)

  • 심지어 같은 쿼리를 수행하지 않기 때문에 캐시에서 같은 공간 차지 x
    => 나중에 누군가 post1 을 클릭하면 캐시 data를 가져오고 싶지, post2로 덮고 싶지 않음.

• 쿼리에는 post Id를 포함한다.

  • 쿼리마다 캐시 가능
  • 어떤 comment 쿼리에 대해서도 캐시를 공유할 필요 x => 각각은 캐시에서 자신만의 공간을 갖게 됨.

  즉, 우리가 원하는건 각 post마다 query를 labeling 하는 것 !!

  Query key

  • 데이터 식별자
  • 종속성 배열
    
    쿼리 키 배열의 두번째 요소 추가 가능

• key가 변할 때, 새로운 쿼리 생성한다
  => 각 쿼리는 개별적인 stale time과 개별적인 cache time을 갖는다.

  • 이 종속성 배열이 다르면 완전히 다른 것으로 간주
    
    react-query ESLing 플러그인이 경고하는 것.

• queryKey에서 post.id와 같은 중요한 종속성이 누락되었다는 뜻 !

• 데이터가 달라도(post.id) react-query는 캐시에 data가 있다고 보고 refetch 안한 것.

• 각 post.id 에 대해 별도 쿼리가 생김
  • 쿼리 캐시에서 각각 별도의 공간 차지

inactive

화면에 표시되지 않는 상태

• 그래서 비활성화
• gcTime 진행 중 (만약 활성이라면 gcTime은 시작되지 않음)