react-query
官网:https://tanstack.com/query/latest/docs/react/overview
刷新缓存:使用refetch或者使缓存失效,如果是全部查询则使用前者,如果是分页查询则使用后者。
staleTime
和 cacheTime
:
staleTime
:可以理解为数据保质期,在保质期内遇到同 key 的请求,不会去再次获取数据,而是从缓存中获取。staleTime
默认 0cacheTime
:数据在内存中的缓存时间,当数据在缓存期时,会按照 key 进行存储,下次遇到同 key 获取数据,会直接从缓存中取,瞬间展示,但是否后台请求新数据,要看 staleTime 的配置,当不配置 staleTime 时,遇到同 key 获取数据,虽然瞬间切换至缓存数据展示,但此时后台获取新数据,待获取完毕后瞬间切换为新数据。cacheTime
默认5分钟
https://blog.csdn.net/qq_21567385/article/details/114171438
isLoading
和isFetching
:
isLoading
:isFetching
:
isLoading
是在 “硬” 加载时才会为 true
,isFetching
是在每次请求时为 true
,那么 isFetching
我们能通俗易懂的理解,就是每次请求时当做 loading 嘛。
那什么是 isLoading
的 “硬” 加载?其实 “硬” 加载就是没有缓存时的加载,那么缓存是什么?
Query Invalidation(查询失效)
QueryClient
的 invalidateQueries
方法主动让查询(query)失效。
1 | // 让缓存中的所有查询失效 |
当使用invalidateQueries
让一个查询失效时,会发生两件事:
- 查询被标记为过期(stale),过期状态会覆盖
staleTime
配置。 - 发起重新请求(refetch),如果当前页面正渲染查询的数据,也会重新请求。
查询匹配
使用invalidateQueries
和removeQueries
这些API(支持查询配置的都可以),支持精确匹配,也可以通过前缀匹配多个查询。
关于过滤器的类型,参考Query Filters.
下面示例中,使用todos
前缀使查询键中以todos
开头的所有查询失效:
1 | import { useQuery, useQueryClient } from '@tanstack/react-query' |
传递具体的query key:
1 | queryClient.invalidateQueries({ |
invalidateQueries
API是非常灵活的,如果只想让todos
查询失效,而不影响更多的子键,可以通过设置exact: true
实现:
1 | queryClient.invalidateQueries({ |
如果要更精细的颗粒度,可以传入函数:
1 | queryClient.invalidateQueries({ |