removeQueries와 resetQueries의 차이

[gorjs3540]

오늘은 react-query의 removeQueries와 resetQueries를 비교해봤다.

removeQueries는 정말 말 그대로 “없애는” 함수였다.
queryCache.findAll()로 쿼리를 찾고, 각각 queryCache.remove(query)를 호출하면서 내부에서 query.destroy()를 수행한다.
이 과정에서 캐시 데이터뿐 아니라 옵저버, fetch 상태 등 쿼리에 연결된 모든 정보가 사라진다.
결국 queryHash 자체가 Map에서 삭제되어 더 이상 react-query 내부에 존재하지 않게 된다.
즉, 이건 “완전 삭제”다. 이후 같은 key로 쿼리를 다시 쓰고 싶으면 새로 생성해야 한다.
로그아웃 같은 상황에서 캐시를 완전히 정리할 때 쓰기 좋겠다 싶었다. 근데 로그아웃은 clear가 나을지도

반면 resetQueries는 훨씬 부드럽다.
동일하게 쿼리들을 순회하지만, 내부적으로는 query.reset()을 호출하면서 쿼리를 초기 상태로 되돌린다.
reset() 안에서도 destroy()가 호출되지만, 바로 이어서 setState(initialState)로 다시 초기 상태를 만들어 놓는다.
즉, 캐시를 비우고 “다시 시작할 준비를 하는” 동작이다.
게다가 마지막엔 refetchQueries()까지 호출해서, active한 쿼리들은 자동으로 다시 데이터를 가져온다.
컴포넌트 입장에서는 쿼리가 사라지는 게 아니라 “데이터가 새로 고쳐진” 것처럼 보인다.

결국 두 함수의 차이는 의도에 있었다.
removeQueries는 쿼리를 시스템에서 제거하는 것이고,
resetQueries는 쿼리를 그대로 둔 채 데이터를 초기화하고 새로 불러오는 것이다.

오늘 이걸 정리하면서, react-query가 단순히 캐시를 다루는 라이브러리가 아니라 “쿼리의 생명주기”를 명확히 설계한 도구라는 걸 느꼈다.
앞으로 캐시를 조작할 때는 “지울지, 초기화할지”를 더 의식적으로 구분해야겠다.

queryClient.removeQueries()

removeQueries<TTaggedQueryKey extends QueryKey = QueryKey>(
  filters?: QueryFilters<TTaggedQueryKey>,
): void {
  const queryCache = this.#queryCache
  notifyManager.batch(() => {
    queryCache.findAll(filters).forEach((query) => {
      queryCache.remove(query)
    })
  })
}

// queryCache.remove(query)
remove(query: Query<any, any, any, any>): void {
  const queryInMap = this.#queries.get(query.queryHash)

  if (queryInMap) {
    query.destroy()

    if (queryInMap === query) {
      this.#queries.delete(query.queryHash)
    }

    this.notify({ type: 'removed', query })
  }
}

// query.destory()
destroy(): void {
  super.destroy()

  this.cancel({ silent: true })
}

queryClient.resetQueries()

resetQueries<TTaggedQueryKey extends QueryKey = QueryKey>(
  filters?: QueryFilters<TTaggedQueryKey>,
  options?: ResetOptions,
): Promise<void> {
  const queryCache = this.#queryCache

  return notifyManager.batch(() => {
    queryCache.findAll(filters).forEach((query) => {
      query.reset()
    })
    
    return this.refetchQueries(
      {
        type: 'active',
        ...filters,
      },
      options,
    )
  })
}

// queryCache.reset()
reset(): void {
  this.destroy()
  this.setState(this.#initialState)
}