基本概念与组件

在React Query中，有三个基本概念支撑了整个数据管理操作。

• 查询：React Query从服务端获取数据的操作。React Query在完成从服务端获取数据后，还会同时对应用中的客户端缓存进行管理。
• 更新：React Query将用户数据推送到服务端的操作。不论是新建数据还是修改数据，对于React Query来说，都是数据更新操作。
• 查询失效：获取一个查询的失效状态是React Query对在客户端缓存的数据有效性进行观测的核心节点。React Query的客户端数据缓存的刷新操作，都是由查询失效操作触发的。

为了实现这三个基本概念，React Query提供了QueryClient供使用。但是要把QueryClient放入应用中，就需要QueryClientProvider的支持。那么这样一来，整个应用的启动文件就会变成以下这个样子。

import { QueryClient, QueryClientProvider } from 'react-query';

const queryClient = new QueryClient();

function main() {
  return (
    <QueryClientProvider client={queryClient}>
      <App />
    </QueryClient>
  );
}

QueryClientProvider可以把QueryClient的实例注入到应用全局，供应用组件树使用。具体原理可以参考Context。

其他的组件在使用的时候，则需要利用useQueryClient这个Hook，然后再搭配useQuery Hook来声明所需要使用的查询。

import { useQueryClient, useQuery } from 'react-query';
import { queryAction } from '../queries';

function ActionComponent() {
  const client = useQueryClient();
  const query = useQuery('action', queryAction);

  return <div></div>;
}

在以上示例中展示了查询的引用，具体的查询构建和使用将在后面的章节中详细描述。