[开源自荐] Quaere - 货拉拉内部的原子化服务端状态管理库.

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.