查询 queries

查询基础

查询是一种对于与唯一键值相关联的异步数据源的声明性依赖。查询可以与任何基于 Promise 的方法（包括 GET 和 POST 方法）一起使用，以从服务器获取数据。如果您的方法修改了服务器上的数据，建议您改用Mutations。

要在你的组件或自定义 Hook 中订阅一个查询，至少需要以下的参数来调用useQueryHook：

该查询的一个唯一的键值
一个返回 Promise 的函数：
- 解析数据或
- 抛出错误

JavaScript

1import { useQuery } from "react-query";2 3function App() {4  const info = useQuery("todos", fetchTodoList);5}

这个唯一键值将在内部用于在整个程序中重新获取数据、缓存和共享查询。

useQuery返回的查询结果将包含有所有关于排版(templating)和数据所需要的信息：

JavaScript

1const result = useQuery("todos", fetchTodoList);

result对象包含一些非常重要的状态，您需要注意这些状态才能提高工作效率。在任何给定时刻，查询只能处于以下状态之一：

isLoading 或者 status === 'loading' - 查询没有数据，正在获取结果中
isError 或者 status === 'error' - 查询遇到一个错误
isSuccess 或者 status === 'success' - 查询成功，并且数据可用
isIdle 或者 status === 'idle' - 查询处于禁用状态（稍后将进一步讲解有关内容）

除了这些主要状态之外，取决于具体查询的状态，还有更多信息可用：

error - 如果查询处于isError状态，则可以通过error属性获取该错误
data - 如果查询处于success状态，则可以通过data属性获得数据
isFetching - 在其他任何状态下，如果查询在获取中（包括后台重新获取数据），则isFetching为true

对于大多数查询，通常先检查isLoading状态，然后检查isError状态，最后假设数据可用并呈现成功状态就足够了：

JavaScript

1function Todos() {2  const { isLoading, isError, data, error } = useQuery("todos", fetchTodoList);3 4  if (isLoading) {5    return <span>Loading...</span>;6  }7 8  if (isError) {9    return <span>Error: {error.message}</span>;10  }11 12  // 现在我们可以假设 `isSuccess === true`13  return (14    <ul>15      {data.map((todo) => (16        <li key={todo.id}>{todo.title}</li>17      ))}18    </ul>19  );20}

如果你不喜欢布尔值，你也可以使用status查询状态：

JavaScript

1function Todos() {2  const { status, data, error } = useQuery("todos", fetchTodoList);3 4  if (status === "loading") {5    return <span>Loading...</span>;6  }7 8  if (status === "error") {9    return <span>Error: {error.message}</span>;10  }11 12  // 也是 `status ==='success'`，但是 “else” 逻辑也起作用13  return (14    <ul>15      {data.map((todo) => (16        <li key={todo.id}>{todo.title}</li>17      ))}18    </ul>19  );20}

延伸阅读

对于执行状态检查的另一种方法感兴趣的话，请参阅此社区资源