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

查看 82|回复 3
作者:iliaoliao   
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({
      fetcher: (variables) => {
        return { title: "todo" };
      },
    });
    RealWorld Examples
    V2Fun 在网络体验方面完全受益于 Quaere 的各种特性,你可以从 V2Fun 源码中看到各种 Quaere 的真实世界使用案例。
    查看完整的文档和示例,请访问 quaere-site.vercel.app.
    查看源码,请访问 quaere.

    Variables, quaere, query, const

  • codehz   
    怎么感觉这设计和某些 graphql 库很像🤔️
    iliaoliao
    OP
      
    @codehz Apollo Client 和 GrahQL 也有参考一些。
    heyleo   
    没想到能在 v 站上面碰到同事。。赞一波,已 star
    您需要登录后才可以回帖 登录 | 立即注册

    返回顶部