ReactQuery(四) Queries [译]
Query Basics (查询基础)
query是对应唯一key的异步数据源的声明性依赖。 query可以与任何基于 Promise 的方法（包括 GET 和 POST 方法）一起使用，以从服务器获取数据。 如果您的方法修改了服务器上的数据，建议改用 Mutations。
要订阅组件或自定义hooks中的query，调用 useQuery 钩子函数请确保以下几点：
唯一的key对应一个query
一个返回Promise的函数
import { useQuery } from 'react-query'
function App() {
const info = useQuery('todos', fetchTodoList)
}复制代码这个唯一的key用于：定义请求，缓存请求和在应用中获取对应的query。
useQuery返回的query值包含对应请求返回的数据模板和其他有用的信息:
const result = useQuery('todos', fetchTodoList)复制代码这个query：result结果包含了一些值得注意关键的状态，了解结果包含的数据模板可以有效提供工作效率。关于query在任意时刻只能处于以下状态：
isLoading或status === 'loading'- query没有数据，当前正在获取。isError或status === 'error'- 查询遇到错误isSuccess或status === 'success'- 查询成功且数据可用。isIdle或status === 'idle'- 查询当前被禁用。
除了这些主要状态之外，还可以根据查询的状态获得更多信息：
error- 如果查query处于 isError 状态，则错误可通过 error 属性获得。data- 如果query处于成功状态，则数据可通过 data 属性获得。isFetching- 在任何状态下，如果query在任何时间正在获取（包括后台重新获取），则 isFetching 将为真。
对于大多数查询，通常检查 isLoading 状态就足够了，然后是 isError 状态，最后，假设数据可用并呈现成功状态：
function Todos() {
const { isLoading, isError, data, error } = useQuery('todos', fetchTodoList)
if (isLoading) {
return <span>Loading...</span>
}
if (isError) {
return <span>Error: {error.message}</span>
}
// We can assume by this point that `isSuccess === true`
return (
<ul>
{data.map(todo => (
<li key={todo.id}>{todo.title}</li>
))}
</ul>
)
}复制代码如果这些状态不喜欢布尔值的直接形式，当然也可以使用全等运算符判断是否处在对应的状态的形式：
function Todos() {
const { status, data, error } = useQuery('todos', fetchTodoList)
if (status === 'loading') {
return <span>Loading...</span>
}
if (status === 'error') {
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>
)
}
作者：Transon
链接：https://juejin.cn/post/7038268078320255006
伪原创工具 SEO网站优化 https://www.237it.com/