React Query 是什么?

官方 About:Hooks for fetching, caching and updating asynchronous data in React.
翻译过来就是:用于在 React 中获取、缓存和更新异步数据的 hooks

快速上手 useQuery

首先编写fetchPhrase函数以从API中获取数据,该函数看起来像这样
我正在使用fetch()。但是我们也可以使用Axios或其他方法。

const fetchPhrase = async () => {
  const res = await fetch("https://international.v1.hitokoto.cn")
  return res.json()
}

现在从React Query导入useQuery

import { useQuery } from "react-query";

现在我们可以使用useQuery钩子来管理数据提取,如下所示

const response = uesQuery("phrase", fetchPhrase);

现在,useQuery的响应返回非常重要。它具有以下属性

data,
error,
failureCount,
isError,
isFetched,
isFetchedAfterMount,
isFetching,
isIdle,
isLoading,
isPreviousData,
isStale,
isSuccess,
refetch,
remove,
status,

data是我们获取的实际数据。根据响应,status将为loadingerrorsuccessidle。所有这些属性都有不同的用途。有关useQuery挂钩的更多信息,请参考官方文档

在我的示例中,我将仅使用datastatus属性,如下所示:

const { data, status } = useQuery('phrase', fetchPhrase)

现在我们可以在浏览器中显示他们,完整代码:

import React from 'react';
import './App.css';
import { QueryClient, QueryClientProvider, useQuery } from "react-query";

const queryClient = new QueryClient()

const Phrase = () => {
  const fetchPhrase = async () => {
    const res = await fetch("https://international.v1.hitokoto.cn")
    return res.json()
  };
  const { data, status, refetch } = useQuery('phrase', fetchPhrase)
  const renderPhrase = () => {
    switch (status) {
      case 'error':
        return (
          <p>Error fetchPhrase data</p>
        )
      case 'loading':
        return (
          <p>Fetching data...</p>
        )
      case 'success':
        return (
          <p>{JSON.stringify(data)}</p>
        )
      default:
        return null
    }
  }

  return (
    <>
      <button onClick={refetch}>refetchPhrase</button>
      {renderPhrase()}
    </>
  )
}

const App = () => {
  return (
    <QueryClientProvider client={queryClient}>
      <div className="App">
        <Phrase />
      </div>
    </QueryClientProvider>
  );
}

export default App;

主要 API

useQuery

useQuery需要三个参数,分别是queryKeysqueryFuncoptions?

  • queryKeys:作为useQuery查询的唯一标识,该值唯一,可以是string、array、object
  • queryFunc:取数据的异步方法,无特殊配置下,会在某个组件实例第一次执行到hooks的时候调用,它的返回值就是data的值
  • options: 配置项,通过这个参数可以配置很多的内置功能,比如 网络恢复时自动query、窗口失焦后获得焦点自动query、错误自动重试、缓存过期时间等等
    包括上面提到的queryFunc执行时机,就可以通过配置enabledfalse来避免调用,可以用于实现一些有前置数据依赖的场景

QueryClientProvider

使用QueryClientProvider组件连接并提供一个QueryClient到你的应用程序:

<QueryClientProvider client={queryClient} contextSharing={false}>
  // contextSharing 默认为false
  // 若为true,将共享第一个和至少一个实例的上下文窗口,以确保在不同的包或 microfrontends 他们都使用相同的实例的上下文
  ...
</QueryClientProvider>

QueryCache

React Query的支柱,它管理每个查询的所有状态、缓存、生命周期
存储包含的所有数据、元信息和查询状态,通常是使用queryClient对缓存的操作,而不是直接操作

useQueryClient

获得当前使用的queryClientqueryClient是用来储存和调度各种异步操作的状态与数据的核心模块

  • getQueryData: 获取缓存中的key对应的data
  • setQueryData: 设置缓存中的key对应的data(可以用作乐观更新!)
  • fetchQuery: 发起查询
  • prefetchQuery: 发起查询,但是不返回数据
const queryClient = useQueryClient()
// 返回上文中的数据
queryClient.getQueryData('phrase')

参考文档

React Query 官方文档
React Query (useQuery)用法
react-query 辅助性hook、queryClient属性方法、useQueryClient、QueryClientProvider、QueryCache、MutationCache

Last modification:September 18th, 2021 at 04:47 pm
If you think my article is useful to you, please feel free to appreciate