🧐상황

YouTube API 활용한 프로젝트를 하던 중에 하루 요청 수를 초과해서 요청이 제한되었다.😮
요청 수를 줄이기 위해 같은 요청이 반복된다면 요청을 보내지 않도록 React Query를 적용해 보기로 결심❗🐥
각 요청에 어떤 키, 얼마의 staleTime을 주었는지, 요청을 줄이기 위해 어떤 과정을 거쳤는지 기록해 보았다.✍🏻

---

🔎React Query 프로젝트에서 사용하기

💡필요한 요청

• 현재 시점에서(23-09-04) 이 프로젝트에 사용한 요청은 6가지
• 인기 동영상
  
• 검색한 동영상
  
• 비디오 정보
  해당 채널이 올린 다른 동영상
  채널 정보
  해당 비디오 댓글
  

💡현재 프로젝트 구조 및 문제점

• 현재 프로젝트 구조
  각각의 컴포넌트에서 요청(빨간색)
  
• 같은 채널에서 VideoCard 컴포넌트를 클릭했다면, 채널 정보와 해당 채널이 올린 다른 동영상 요청은 다시 할 필요가 없음
• 그러나 이 구조의 경우 VideoDetail의 내용이 바뀔 때 마다 하위 컴포넌트가 새로 마운트돼서 채널 정보와 해당 채널이 올린 다른 동영상 요청 발생
  
• 새로운 비디오를 클릭했을 때 채널 정보, 해당 채널이 올린 다른 동영상 정보를 계속 받아옴 - 같은 key로 쿼리 요청 2개씩 계속 발생

• 변경한 프로젝트 구조
  같은 채널의 VideoCard 컴포넌트 클릭했을 때, 채널 정보와 해당 채널이 올린 다른 동영상 요청 발생하지 않음
  
  

💡key 값과 staleTime 지정

• 대부분 자주 변화하는 정보가 아니기 때문에 staleTime 5분으로 설정
• 인기 동영상, 검색한 동영상 staleTime 1분으로 설정
  검색했을 때 1분정도 지나면 새로운 정보를 받아와야 한다고 판단
• 비디오 댓글 staleTime 10초로 설정
  댓글은 비교적 빨리 반영하는 경우가 많기 때문에 10초가 적당하다 판단

인기 동영상

• key : ['videos', null]
• staleTime : 1분

검색한 동영상

• key : ['videos', 검색한 keyword]
  같은 keyword로 검색한 경우 staleTime 동안은 재요청 X
• staleTime : 1분

비디오 정보

• key : ['video', 'detail', videoId]
• staleTime : 5분

해당 채널이 올린 다른 동영상

• key : ['videos', 'related', channelId]
• staleTime : 5분

채널 정보

• key : ['channel', channelId]
• staleTime : 5분

해당 비디오 댓글

• key : ['comment', videoId]
• staleTime : 10초