QueryCacheasd가 제공하는 build 메서드에서, useQuery로 넘긴 QueryKey를 hash와 하고 이것을 query인스턴스로 반환한다. 만약에 쿼리 hash값이 기존에 있다면, 해당 쿼리를 반환하고, 쿼리 hash값이 없다면? 새로운 쿼리 인스턴스를 만들어 쿼리 Map에 저장후, 쿼리를 반환한다.
export class QueryCache extends Subscribable<> {
private queries: Query<any, any, any, any>[]
private queriesMap: QueryHashMap
constructor(config?: QueryCacheConfig) {}
// option을 받아서, querykey를 hash화해서
build(client, options, state?) {
const queryKey = options.queryKey!
const queryHash = options.queryHash ?? hashQueryKeyByOptions(queryKey, options);
// queryHash를 킷값으로 활용하여 queriesMap에 저장된 Query 인스턴스를 조회해봅니다.
let query = this.get(queryHash)
// 존재하지 않는다면 새로 생성해서 캐시에 등록 후 반환합니다.
if (!query) {
query = new Query({
cache: this,
logger: client.getLogger(),
queryKey,
queryHash,
options: client.defaultQueryOptions(options),
state,
defaultOptions: client.getQueryDefaults(queryKey),
})
this.add(query)
}
// Query 인스턴스가 존재한다면 바로 반환하고
return query
}
add(query) {
if (!this.queriesMap[query.queryHash]) {
this.queriesMap[query.queryHash] = query
this.queries.push(query)
}
}
}
<aside> 💡
</aside>
- 컴포넌트 레벨에서 마운트가 됬는데, useQuery가 있다면,
QueryObserver를 생성한다. QueryObserver는QueryCache에 있는 Query를 구독한다.
<aside> 💡
이 동작은 각각의 리액트 컴포넌트에서 동일한 옵션으로 **useQuery**훅을 호출한 경우에 중요한 역할을 하게됩니다. **queryKey**를 식별자로 활용하여 캐시에 동일한 **Query**가 존재하고 **Query**가 가진 QueryState(서버의 데이터)가 유효한 경우 이 값을 재활용하게 됩니다. 이를 통해 중복된 네트워크 요청이 여러번 발생하지 않도록 합니다.
</aside>
