react-query学习笔记
为什么要写这篇文章
- 公司业务使用react-query，但目前只停留在“能用”的阶段，离真正会用并且灵活使用API还有很长距离
react-query介绍
react-query是React数据获取（date-fetch）库，在使用Hooks写组件时，发起异步请求时，不仅需要管理请求状态，而且还需要处理异步数据，为此要多写几个useState/useEffect来控制。
而react-query也是一个Hooks库，使用很少的代码完成对服务端的状态管理，而且大多数情况下使用查询useQuery和修改useMutation就可以了
我们知道redux可以轻松的管理客户端状态，但并不适合处理异步和服务端状态，服务端状态有以下比较复杂的点：
- 缓存…（数据未变化时不去请求）
- 知道数据何时“过时”
- 在后台更新“过时”的数据
- 分页、延迟加载等性能优化
- 结构化共享并存储查询结果
而react-query正是为此而生，可以方便的管理服务端的状态
安装
# use npmnpm i react-query# use yarnyarn add react-query使用
-
在App.tsx中创建全局实例
client，并通过QueryClientProvider将client传递下去，用于管理所有请求import './App.css'import {QueryClient,QueryClientProvider,} from 'react-query'import { ReactQueryDevtools } from 'react-query/devtools';import Demo1 from './components/Demo1'// 创建一个 clientconst queryClient = new QueryClient()function App() {return (// 提供client<QueryClientProvider client={queryClient}>{/* 添加devtools */}{process.env.NODE_ENV === 'development' ? (<ReactQueryDevtools initialIsOpen={false} position='bottom-right' />) : ('')}<Demo1 /></QueryClientProvider>)}export default App -
在组件中使用useQuery和useMutation，通过useQueryClient获取到全局QueryClient实例，调用api管理react-query的请求，如
queryClient.invalidateQueries('posts')import axios from 'axios';import { useMutation, useQuery, useQueryClient } from 'react-query';type dataType = {id: stringtitle: string}const Demo1 = () => {// 访问App QueryClientProvider提供的clientconst queryClient = useQueryClient();const query = useQuery('posts', () => axios.get('https://jsonplaceholder.typicode.com/posts'))console.log(query);const { data, isLoading, isError } = query;const { mutate } = useMutation(() => axios.delete('https://jsonplaceholder.typicode.com/posts/1'), {onSuccess: () => {// 错误处理和刷新queryClient.invalidateQueries('posts')},})if (isError) {return <div>error</div>;}if (isLoading) {return <div>loading</div>;}return (<><buttononClick={() => {mutate()}}>Delete</button><ul>{(data?.data as unknown as dataType[])?.map(d => <li key={d.id}>{d.title}</li>)}</ul></>)}export default Demo1- useQuery接收一个唯一键和一个返回Promise的函数以及config
[queryKey, queryFn, config]，如posts在内部用于在整个程序中重新获取数据、缓存和共享查询等 - 通过打印query会看到，React-Query将所有的请求中间状态进行封装
- isFetching 或者 status === ‘fetching’ 类似于isLoading，不过每次请求时都为true，所以使用isFetching作为loading态更好
- isLoading 或者 status === ‘loading’ 查询没有数据，正在获取结果中，只有“硬加载”时才为true，只要请求在cacheTime设定时间内，再次请求就会直接使用cache，即“isLoaindg = isFetching + no cached data”
- isError 或者 status === ‘error’ 查询遇到一个错误，此时可以通过 error 获取到错误
- isSuccess 或者 status === ‘success’ 查询成功，并且数据可用，通过 data 获取数据
- isIdle 或者 status === ‘idle’ 查询处于禁用状态
- useQuery接收一个唯一键和一个返回Promise的函数以及config
示例：
import { useQuery, useMutation, useQueryClient, QueryClient, QueryClientProvider,} from 'react-query'import { getTodos, postTodo } from '../my-api'
// 创建一个 clientconst queryClient = new QueryClient()
function App() { return ( // 提供 client 至 App <QueryClientProvider client={queryClient}> <Todos /> </QueryClientProvider> )}
function Todos() { // 访问 client const queryClient = useQueryClient()
// 查询 const query = useQuery('todos', getTodos)
// 修改 const mutation = useMutation(postTodo, { onSuccess: () => { // 错误处理和刷新 queryClient.invalidateQueries('todos') }, })
return ( <div> <ul> {query.data.map((todo) => ( <li key={todo.id}>{todo.title}</li> ))} </ul>
<button onClick={() => { mutation.mutate({ id: Date.now(), title: 'Do Laundry', }) }} > Add Todo </button> </div> )}
render(<App />, document.getElementById('root'))重要知识点
-
refetchOnWindowFocus
const queryClient = new QueryClient({defaultOptions: {queries: {refetchOnWindowFocus: false,},},})refetchOnWindowFocus默认为true，用户短暂离开再返回应用页时，数据就会被标记为过时，这时react-query会在后台自动请求新的数据，通过设置refetchOnWindowFocus为false禁用
-
query-keys
-
字符串作为query-keys时，会在内部转换为数组
useQuery('posts', ...) // queryKey === ['posts'] -
数组作为queryKey，查询功能依赖于变量，类似于useEffect，则将其包含在查询键值中，尽量使用数组
useQuery(["posts", postId], ...);
-
-
query-functions
任何一个返回Promise的函数
useQuery(["todos"], fetchAllTodos);useQuery(["todos", todoId], () => fetchTodoById(todoId));useQuery(["todos", todoId], async () => {const data = await fetchTodoById(todoId);return data;});// 通过解构queryKey可以拿到传递的query-keysuseQuery(["todos", todoId], ({ queryKey }) => fetchTodoById(queryKey[1]), {enabled: false,retry: 3,select: data => {},onSuccess: data => {},onError: error => {}...});useQuery的config配置有很多，API
-
并行查询parallel-queries
同时执行的查询
function App () {// 下面的查询将自动地并行执行const usersQuery = useQuery('users', fetchUsers)const teamsQuery = useQuery('teams', fetchTeams)const projectsQuery = useQuery('projects', fetchProjects)...}React-query提供useQueries动态并行查询
Terminal window function App({ users }) {const userQueries = useQueries(users.map((user) => {return {queryKey: ["user", user.id],queryFn: () => fetchUserById(user.id),};}),);} -
有依赖的查询 enabled
具有相依性的query：当有多个query 设定相依性后，前一个query 必须成功执行并取得资料，下一个query 才会接续执行。
开启/关闭查询：假设我们有一个定时查询，通过refetchInterval来实现，但是当一个弹窗打开的时候我们可以暂停这个查询，避免弹窗后面的内容发生变更。 demo
-
缓存
-
useQuery和useInfiniteQuery生成的查询实例会立即将缓存数据视为过时（slate）的
-
staleTime（不新鲜时间） 默认0，可全局或单独配置，在此段时间内再次遇到相同key的请求，不会再去获取数据，直接从缓存中获取，isFetching也为false，如果设置为Infinity，则当前查询的数据只会获取一次，在整个网页的生命周期内缓存
useQuery('posts', axios => ('https://jsonplaceholder.typicode.com/posts'), {select: ({ data }) => {return data.data;},cacheTime: Infinity,staleTime: Infinity,});通过devTools可以看到此时数据是fresh状态
这时候页面上的所有相同query-keys的请求都会被缓存起来，想要重新请求就需要清空缓存
queryClient.invalidateQueries('todos');-
cacheTime（缓存时间） 数据在内存中的缓存时间，默认5分钟，在不设置slateTime时，如果缓存期内遇到相同key的请求，虽然会直接使用缓存数据呈现UI，但还是会获取新数据，待获取完毕后切换为新数据，isFetching为true；如果某个queryKey未被使用时，这个query就会进入inactive状态，如果在cacheTime设定的时间内未被使用的话，这个query及其data就会被清除
可以看到此时
["post", 3]和["post", 2]是inactive状态，过设定的cacheTime后会被清除 -