react-query
这是一个实用于react hooks的申请库。
这个库将帮忙你获取、同步、更新和缓存你的近程数据，
提供两个简略的 hooks，就能实现增删改查等操作
react-query
一些配置参数
staleTime从新获取数据的工夫距离 默认0cacheTime数据缓存工夫 默认 1000 60 5 5分钟retry失败重试次数 默认 3次refetchOnWindowFocus窗口从新取得焦点时从新获取数据 默认 falserefetchOnReconnect网络从新链接refetchOnMount实例从新挂载enabled如果为“false”的化，“useQuery”不会触发，须要应用其返回的“refetch”来触发操作
如何全局配置呢？如下：
import { ReactQueryConfigProvider, ReactQueryProviderConfig } from 'react-query';const queryConfig: ReactQueryProviderConfig = { /** * refetchOnWindowFocus 窗口取得焦点时从新获取数据 * staleTime 过多久从新获取服务端数据 * cacheTime 数据缓存工夫 默认是 5 * 60 * 1000 5分钟 */ queries: { refetchOnWindowFocus: true, staleTime: 5 * 60 * 1000, retry: 0 },};ReactDOM.render( <ReactQueryConfigProvider config={queryConfig}> <App /> </ReactQueryConfigProvider> document.getElementById('root') );也能够独自配置，如下：
function Todos() { // 第三个参数即可传参了 // "enabled"参数为false的化，不会主动发动申请，而是须要调用“refetch”来触发 const { isIdle, isLoading, isError, data, error, refetch, isFetching, } = useQuery('todos', fetchTodoList, { enabled: false, }) return ( <> <button onClick={() => refetch()}>Fetch Todos</button> {isIdle ? ( 'Not ready...' ) : isLoading ? ( <span>Loading...</span> ) : isError ? ( <span>Error: {error.message}</span> ) : ( <> <ul> {data.map(todo => ( <li key={todo.id}>{todo.title}</li> ))} </ul> <div>{isFetching ? 'Fetching...' : null}</div> </> )} </> ) }useQuery（查）
详见
根本应用办法
function Todos() { // useQuery的第一个参数，作为useQuery查问的惟一标识，该值惟一 // 能够是string、array、object // string -> useQuery('todos', ...) queryKey === ['todos'] // array -> useQuery(['todo', 5], ...) queryKey === ['todo', 5] // object -> useQuery(['todo', 5, { preview: true }], ...) queryKey === ['todo', 5, { preview: true }] const { isLoading, isError, data, error } = useQuery('todos', fetchTodoList) if (isLoading) { return <span>Loading...</span> } if (isError) { return <span>Error: {error.message}</span> } // also status === 'success', but "else" logic works, too return ( <ul> {data.map(todo => ( <li key={todo.id}>{todo.title}</li> ))} </ul> ) }传递参数
function Todos({ completed }) { // useQuery(['todo', { status: 1, page: 1 }], ...) queryKey === ['todo', { status: 1, page: 1 }] // 传递参数给“fetchTodoList”应用 const queryInfo = useQuery(['todos', { status: 1, page: 1 }], fetchTodoList) } // 函数参数 // key -> “todos” // status -> 1 page -> 1 function fetchTodoList(key, { status, page }) { return new Promise() // ... }该库实现了罕用的查问操作：
- 分页查问
- 有限滚动
useMutation（增、改、删）操作
// 当“mutate()”被调用时，执行“pingMutation”const PingPong = () => { const [mutate, { status, data, error }] = useMutation(pingMutation) const onPing = async () => { try { const data = await mutate() console.log(data) } catch { } } return <button onClick={onPing}>Ping</button> }传递参数
// "mutate({title})"就会将参数“title”传递给“createTodo”函数了const createTodo = ({ title }) => { console.log("title ", title)}const CreateTodo = () => {const [title, setTitle] = useState('')const [mutate] = useMutation(createTodo)const onCreateTodo = async e => { e.preventDefault() try { await mutate({ title }) // Todo was successfully created } catch (error) { // Uh oh, something went wrong }}return ( <form onSubmit={onCreateTodo}> <input type="text" value={title} onChange={e => setTitle(e.target.value)} /> <br /> <button type="submit">Create Todo</button> </form>)}革除缓存
比方当咱们编辑完一篇文章，返回列表页面，如果不革除缓存，那么数据还是缓存的数据，
所以须要革除缓存，使得“userQuery”生效，回到列表页的时候从新拉取最新数据
queryCache invalidateQueries
import { useMutation, useQueryCache } from 'react-query'const queryCache = useQueryCache()const [mutate] = useMutation(addTodo, { onSuccess: () => { // invalidateQueries 的匹配规定 // eg: // queryCache.invalidateQueries('todos') 那么如下两个`query key`都会被匹配到，匹配到的缓存都会生效 // const todoListQuery = useQuery('todos', fetchTodoList) // const todoListQuery = useQuery(['todos', { page: 1 }], fetchTodoList) queryCache.invalidateQueries('todos') queryCache.invalidateQueries('reminders') },})以上就是“react-query”应用的一些基本操作