231 - 《React Query 笔记：下》

总算看完了 https://tkdodo.eu/blog/practical-react-query 系列剩下的第 9 到 18 篇，花的时间比预计的长。对 RQ 路转粉，学习到不少关于请求的细节处理思路，推荐大家都好好读一读。

1、RQ 预填充缓存数据有两种方法：placeholderData 和 initialData。相同的是，1）都会直接跳过 loading 状态进入 success 状态，2）都支持值或者返回值的函数两种类型。不同的是，1）initialData 在缓存层处理，直接放入缓存，尊重 staleTime，一个 query key 只能由一个 initialData，refetch 错误时数据还在，2）placeholderData 在观察者层处理，不放入缓存，用于临时占位，可以为相同的 query key 创建多个不同的 placeholderData，refetch 错误时数据消失。

2、RQ 是啥？他不是请求库，因为不内置 axios、fetch 之类的；他是异步的状态管理器，或者是服务端状态的同步工具。在 RN 之前，通常有两种数据获取的方法，1）一次获取、全局分发、很少更新，2）每次获取（比如每次 modal 打开时都请求一遍数据）。这两种都不太好，前者更新太少，后者更新太多。RN 通过 Stale While Revalidate 和机制的 refetch 机制来解这个问题。refetch 触发时机包括 refetchOnMount、refetchOnWindowFocus、refetchOnReconnect，以及手动的 queryClient.invalidateQueries。同时可针对不同场景设置不同的 staleTime 来控制 refetch 频率。

3、RQ 处理错误有 3 种方法。1）useQuery 返回值的 isError 或 status === ‘error’ 判断，2）onError 回调，可以是 query 级，也可以是全局用 queryCache 配，query 级的要当心避免多次触发，3）基于 Error Boundary，配置 useErrorBoundary:true 即可。三种方法可以搭配使用，作者建议针对 refetch 错误用全局 onError + toast 显示，其他的用 1 或 3 的方法处理。另外，如果有 fetch，要在 queryFn 里处理 4xx 和 5xx 请求，他不像 axios 一样会 reject。

4、RQ 通过 useMutation 实现突变（更新数据）。和 useQuery 相同的是都会提供 loading、error、status 数据，也支持 onSuccess、onError 和 onSettled 回调。和 useQuery 不同的是，useQuery 是声明式，而 useMutation 是命令式，同时 useMutation 也不会共享状态。突变后要更新数据有三种思路，1）invalidate query 让他 refetch，注意只有活跃的 query 会 refetch，2）通