知海

JavaScript：Grafoo（客户端）

graphql-github-io-zh-Hans生态项目与库

JavaScript：Grafoo（客户端）

概述

Grafoo 是一款轻量级、多用途的 GraphQL 客户端，核心库体积仅 1.6kb。它提供了针对多种前端框架的视图层集成，旨在以极小的开销为应用带来完整的 GraphQL 数据获取与状态管理能力。

Grafoo 由 @grafoo/core 提供核心逻辑，并支持与 React、Vue、Preact 等主流框架进行无缝对接，适合追求性能与灵活性的现代化项目。

特性

  • 极致轻量：核心包仅 1.6kb，几乎不增加应用打包体积。
  • 多框架支持：为 React、Vue、Preact 等框架提供官方视图绑定。
  • 一站式设计：集查询、变更、缓存、状态管理于一体，无需额外引入重型库。
  • 声明式 API：使用组件或装饰器方式简洁地声明 GraphQL 操作。
  • 主动缓存：默认支持缓存复用，避免重复请求。

安装

通过 npm 或 yarn 安装核心包以及对应框架的集成包：

bash 复制代码 
# 安装核心库
npm install @grafoo/core

# 根据项目框架安装对应集成（示例：React）
npm install @grafoo/react

快速上手

以下以 React 为例，演示如何使用 Grafoo 发起 GraphQL 查询。

1. 创建客户端实例

js 复制代码 
import { GrafooClient } from "@grafoo/core";

const client = new GrafooClient({
  url: "https://api.example.com/graphql",
  // 可选：请求头、缓存配置等
  headers: { Authorization: "Bearer token" },
});

2. 注入客户端并查询

jsx 复制代码 
import { GrafooProvider, useQuery } from "@grafoo/react";

const GET_POSTS = `
  query GetPosts {
    posts {
      id
      title
    }
  }
`;

function Posts() {
  const { data, loading, error } = useQuery(GET_POSTS);

  if (loading) return <p>加载中...</p>;
  if (error) return <p>出错了：{error.message}</p>;

  return (
    <ul>
      {data.posts.map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}

function App() {
  return (
    <GrafooProvider client={client}>
      <Posts />
    </GrafooProvider>
  );
}

3. 执行变更

jsx 复制代码 
import { useMutation } from "@grafoo/react";

const CREATE_POST = `
  mutation CreatePost($title: String!) {
    createPost(title: $title) {
      id
      title
    }
  }
`;

function CreatePostButton({ title }) {
  const [createPost, { loading }] = useMutation(CREATE_POST);

  return (
    <button disabled={loading} onClick={() => createPost({ variables: { title } })}>
      发布
    </button>
  );
}

其他框架

Grafoo 同样为 Vue、Preact 提供了相似的 API，只需替换对应的集成包即可：

bash 复制代码 
npm install @grafoo/vue
# 或
npm install @grafoo/preact

相关链接

总结

Grafoo 是一个小而美的 GraphQL 客户端，适合对包体积敏感、且需要跨框架复用的项目。其简洁的 API 和出色的性能表现，使其成为生态中值得关注的解决方案。

帮助我们改进文档

发现翻译问题或内容错误？请告诉我们。