"Quaere" 是一个 React 的原子化服务端状态管理库。
Quaere 的核心实现来自于 Tanstack Query,但去除了 queryKey 概念,API 设计类似于 Jotai,提供了一套声明式的、原子化的状态管理方案,帮助你高效地管理服务端状态。
动机
Tanstack Query 和 SWR 在服务端状态管理上已经做得很不错,但仍然有下面的一些痛点。
Quaere
如果我既想受益于主流库,又没有这些痛点,怎么办呢?
Quaere 就是为了解决这个问题而诞生的,它既包含了主流库特性也提供了一套声明式的、原子化的状态管理方案。
快速开始
下面是一个最基本的示例:
import { query } from "quaere";
const anQuery = query({
fether: (variables) => axios.get(url, variables),
});
import { useQuery } from "quaere";
function Example() {
const { data } = useQuery({ query: anQuery, variables });
}
上面的示例展示了 Quaere 的两个核心函数:
query:用于创建一个异步资源解析配置,我们称其为 "查询配置"。
useQuery:该 hook 用于读取 "查询配置" 发起请求,并且每个不同 variables 都会返回与其相应的服务端状态。
Typescript
默认情况下,Quaere 会从 fetcher 推断出 类型,因此你可以自动获得首选类型。
const todoQuery = query({
fetcher: (variables: { id: number }) => {
return { title: "todo" };
},
});
// variables 将被推断为 { id: number }, data 将被推断为 { title: string }
const { data } = useQuery({ query: todoQuery, variables: { id: 1 } });
你还可以显式地指定 variables、 data 参数的类型。
type Data = { title: string };
type Variables = { id: number };
const todoQuery = query({
fetcher: (variables) => {
return { title: "todo" };
},
});
RealWorld Examples
V2Fun 在网络体验方面完全受益于 Quaere 的各种特性,你可以从 V2Fun 源码中看到各种 Quaere 的真实世界使用案例。
查看完整的文档和示例,请访问 quaere-site.vercel.app.
查看源码,请访问 quaere.
Variables, quaere, query, const