查询函数 query-functions
查询函数实际上可以是任何一个返回 Promise 的函数。返回的 Promise 应该解决数据或引发错误。
以下所有都是有效的查询函数配置:
JavaScript
1useQuery(["todos"], fetchAllTodos);2useQuery(["todos", todoId], () => fetchTodoById(todoId));3useQuery(["todos", todoId], async () => {4 const data = await fetchTodoById(todoId);5 return data;6});7useQuery(["todos", todoId], ({ queryKey }) => fetchTodoById(queryKey[1]));处理和抛出错误
为了使 React Query 确定查询错误,查询函数的错误必须抛出。查询函数中引发的任何错误都将保留在查询的error状态上。
JavaScript
1const { error } = useQuery(["todos", todoId], async () => {2 if (somethingGoesWrong) {3 throw new Error("Oh no!");4 }5 6 return data;7});与fetch和其他默认不抛出错误的客户端库一起使用
虽然大多数库(例如axios或graphql-request)会针对不成功的 HTTP 请求自动抛出错误,但某些库(如fetch)默认不会抛出错误。
在这种情况下,你需要自己throw它们。这是使用流行的fetch API 的一种简单方法:
JavaScript
1useQuery(["todos", todoId], async () => {2 const response = await fetch("/todos/" + todoId);3 if (!response.ok) {4 throw new Error("Network response was not ok");5 }6 return response.json();7});查询函数的参数
查询键值不仅用于唯一地标识要获取的数据,而且还可以方便地传递到查询函数中,虽然并非总是必需的,但这使得在需要时提取查询函数成为可能:
JavaScript
1function Todos({ status, page }) {2 const result = useQuery(["todos", { status, page }], fetchTodoList);3}4 5// 在查询函数中访问键值,状态和页面变量!6function fetchTodoList({ queryKey }) {7 const [_key, { status, page }] = queryKey;8 return new Promise();9}使用查询对象代替参数
在 React Query 的 API 中只要支持[queryKey,queryFn,config]签名的任何函数,你也可以使用一个对象来表达相同的配置:
JavaScript
1import { useQuery } from "react-query";2 3useQuery({4 queryKey: ["todo", 7],5 queryFn: fetchTodo,6 ...config,7});