React-Query源码探秘3-QueryCache

专栏目录: 全网最细 React-Query源码探秘 - 不月阳九的专栏 - 掘金 (juejin.cn)

QueryCache

首先,useQuery需要传入查询键queryKey 查询键是一个数据的唯一标识,每个数据都会被保存到一个Query对象中。

源码分析

Query-Cache用于保存和管理这些Query对象 ， 提供了对Query的增删查方法

1. Query-Cache在new QueryClient()的时候被创建并挂载

class QueryClient {
  private queryCache: QueryCache
   ...
  constructor(config: QueryClientConfig = {}) {
    this.queryCache = config.queryCache || new QueryCache()// 创建
  }

Query-Cache

class QueryCache extends Subscribable<QueryCacheListener> {
    config: QueryCacheConfig
    private queries: Query<any, any, any, any>[]
    private queriesMap: QueryHashMap

constructor(config?: QueryCacheConfig) {
  super()
  this.config = config || {}
  this.queries = [] // 保存Query的数组
  this.queriesMap = {} //保存Query的map(key为对应的hash)
}

 // 通过传入的queryKey查询或者创建一个Query
 build(){
     const query = this.get(queryHash)
     if(!query){
       query = new Query()
     }
     this.add(query)
 }
 
 // 添加query到cache中
 add(){...}
 
 // 从cache移除一个query
 remove(){...}
 
 // 清除queries
 clear(){...}
 
 // 查找一个query
 find(){...}
 
 // 获取一个query
 get(){...}
 
...
}