JavaScript：Apollo Client（客户端）

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

项目简介

Apollo Client 是一个功能强大的 JavaScript GraphQL 客户端，专为与 React、React Native、Angular 2 以及纯 JavaScript 项目无缝协作而设计。它帮助开发者通过声明式的方式管理服务端数据，使得在应用中获取、缓存和更新数据变得简单且可预测。

核心特性

声明式数据获取：使用 GraphQL 查询语法，组件内直接声明所需数据。
智能缓存：内置规范化缓存，支持乐观 UI 更新，提升用户体验。
多框架支持：原生支持 React / React Native、Angular 及所有主流视图层。
先进开发工具：提供浏览器开发者工具用于调试查询与缓存状态。
现代 React 集成：支持 Hooks 以及 Suspense 等现代 React 特性。

快速开始

安装

通过 npm 或 yarn 安装 Apollo Client 及其 GraphQL 依赖：

bash 复制代码

npm install @apollo/client graphql

基础用法（以 React 为例）

首先，初始化一个 ApolloClient 实例，并通过 ApolloProvider 将其接入你的 React 应用：

jsx 复制代码

import React from 'react';
import { ApolloClient, InMemoryCache, ApolloProvider } from '@apollo/client';
import App from './App';

const client = new ApolloClient({
  uri: 'https://api.example.com/graphql',
  cache: new InMemoryCache(),
});

export default function Root() {
  return (
    <ApolloProvider client={client}>
      <App />
    </ApolloProvider>
  );
}

然后在组件中使用 useQuery Hook 获取数据：

jsx 复制代码

import { gql, useQuery } from '@apollo/client';

const GET_USER = gql`
  query GetUser($id: ID!) {
    user(id: $id) {
      id
      name
    }
  }
`;

function User({ id }) {
  const { loading, error, data } = useQuery(GET_USER, {
    variables: { id },
  });

  if (loading) return <p>加载中...</p>;
  if (error) return <p>错误: {error.message}</p>;

  return <h1>{data.user.name}</h1>;
}

周边资源

官方网站：http://apollographql.com/client/
GitHub 仓库：apollographql/apollo-client
npm 包：@apollo/client

帮助我们改进文档

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