Effective React Query Keys

• 목적 : 어떻게 하면 쿼리 키를 잘 관리할 수 있을까?

• 문제 : REST API EndPoint가 정말 많아 졌다.
  전략 관련 API만 15개정도 되는 듯 하다.
  테이블 갯수만 20개이니, CURD만 쳐도 최소 80개의 REST API EndPoint가 나올 것 이다.

도입

• 쿼리 키 관리는 매우 중요하다.
• 키 덕분에 자동으로 데이터가 refresh 된다.
• 키를 통해 특정 캐쉬를 수정 할 수 있다.
• 캐쉬 invalid(무효화)할때 키를 사용한다.

Caching Data

• 쿼리 캐시는 js object 일뿐이다.
• key = 직렬화된 쿼리 키값, value = 쿼리데이터+메타데이터
• 구조적으로 다른 useQuery 와 useInfiniteQuery는 다른 키를 갖는게 맞다.

Automatic Refetching

• ✔ 쿼리는 선언적(declarative) 이다.
• 한번 선언된 쿼리는 변경할 수 없다.

function Component() {
  const { data, refetch } = useQuery(['todos'], fetchTodos)

  // ❓ how do I pass parameters to refetch ❓
  return <Filters onApply={() => refetch(???)} />
}

function Component() {
  const [filters, setFilters] = React.useState()
  const { data } = useQuery(['todos', filters], fetchTodos)

  // ✅ set local state and let it "drive" the query
  return <Filters onApply={setFilters} />
}

Manual Interaction

• 쿼리 키로 직접 인터렉션 할 수 있음
• 1. invalidateQueries ( 캐시 무효화 )
• 2. setQueriesData ( 캐시 수정 )
• 3. Query Filters, which allow you to fuzzily match ( 캐시 퍼지 검색 )

ref

https://tkdodo.eu/blog/effective-react-query-keys