关于前端:reactquery

react-query

这是一个实用于 react hooks 的申请库。
这个库将帮忙你获取、同步、更新和缓存你的近程数据，
提供两个简略的 hooks，就能实现增删改查等操作

react-query

一些配置参数

• staleTime 从新获取数据的工夫距离 默认0
• cacheTime 数据缓存工夫 默认 1000 60 5 5 分钟
• retry 失败重试次数 默认 3 次
• refetchOnWindowFocus 窗口从新取得焦点时从新获取数据 默认 false
• refetchOnReconnect 网络从新链接
• 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”应用的一些基本操作