Quaere 是什么
"Quaere" 是一个 React 的原子化服务端状态管理库。
Quaere 的核心实现来自于 Tanstack Query，但去除了 queryKey 概念，API 设计类似于 Jotai，提供了一套声明式的、原子化的状态管理方案，帮助你高效地管理服务端状态。
动机
Tanstack Query 和 SWR 做得很不错，但他们的仍然有下面的一些痛点。
- 需要手动地管理你的 queryKey 和异步资源的对应关系。
- 没有统一的地方管理，其 hook 很容易散落在项目各处。
- 涉及到异步资源的操作时对 typescript 类型不友好。
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<Data, Variables>({
fetcher: (variables) => {
return { title: "todo" };
},
});
RealWorld Examples
V2Fun 在网络体验方面完全受益于 Quaere 的各种特性，你可以从 V2Fun 源码中看到各种 Quaere 的真实世界使用案例。
查看完整的文档和示例，请访问 quaere-site.vercel.app. 查看源码，请访问 quaere.
