Queries | TanStack Query Solid 文档

查询基础

查询是与一个唯一键关联的、声明式的对异步数据源的依赖。查询可以与任何基于 Promise 的方法（包括 GET 和 POST 方法）一起使用，从服务器获取数据。如果你的方法会修改服务器上的数据，我们建议使用 Mutations（变更）。

要在组件或自定义 Hook 中订阅查询，请调用 useQuery Hook，并至少传入：

**查询的唯一键**
一个返回 Promise 的函数，该 Promise 会
- 解析数据，或者
- 抛出错误

tsx

import { useQuery } from '@tanstack/solid-query'

function App() {
  const info = useQuery(() => { queryKey: ['todos'], queryFn: fetchTodoList })
}

import { useQuery } from '@tanstack/solid-query'

function App() {
  const info = useQuery(() => { queryKey: ['todos'], queryFn: fetchTodoList })
}

您提供的**唯一键**在内部用于在整个应用程序中重新获取、缓存和共享您的查询。

useQuery 返回的查询结果包含您进行模板制作和数据其他用途所需的所有查询信息。

tsx

const result = useQuery(() => { queryKey: ['todos'], queryFn: fetchTodoList })

const result = useQuery(() => { queryKey: ['todos'], queryFn: fetchTodoList })

result 对象包含几个非常重要的状态，你需要了解它们才能高效地使用。在任何给定时刻，一个查询只能处于以下几种状态之一：

isPending 或 status === 'pending' - 查询尚无数据
isError 或 status === 'error' - 查询遇到错误
isSuccess 或 status === 'success' - 查询成功，数据可用。

除了这些主要状态之外，根据查询的状态，还可以获得更多信息：

error - 如果查询处于 isError 状态，则可以通过 error 属性获取错误信息。
data - 如果查询处于 isSuccess 状态，则可以通过 data 属性获取数据。
isFetching - 无论处于何种状态，如果查询正在进行任何形式的获取（包括后台重新获取），isFetching 的值都将是 true。

对于大多数查询，通常足以先检查 isPending 状态，然后是 isError 状态，最后假设数据可用并渲染成功状态。

tsx

function Todos() {
  const { isPending, isError, data, error } = useQuery(() => {
    queryKey: ['todos'],
    queryFn: fetchTodoList,
  })

  if (isPending) {
    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 { isPending, isError, data, error } = useQuery(() => {
    queryKey: ['todos'],
    queryFn: fetchTodoList,
  })

  if (isPending) {
    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>
  )
}

如果您不喜欢布尔值，也可以随时使用 status 状态。

tsx

function Todos() {
  const { status, data, error } = useQuery(() => {
    queryKey: ['todos'],
    queryFn: fetchTodoList,
  })

  if (status === 'pending') {
    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>
  )
}

function Todos() {
  const { status, data, error } = useQuery(() => {
    queryKey: ['todos'],
    queryFn: fetchTodoList,
  })

  if (status === 'pending') {
    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>
  )
}

如果你在访问 data 之前已经检查了 pending 和 error 状态，TypeScript 也会正确地缩小 data 的类型。