# Apollo Client — Industry-Leading GraphQL Client for TS/JS

> Apollo Client is the industry-leading GraphQL client for TypeScript, JavaScript, React, Vue, Angular, and more. Powerful caching with normalized store, intuitive APIs, optimistic UI, subscriptions, and comprehensive developer tools.

## Install

Save in your project root:

## Quick Use

```bash
npm i @apollo/client graphql
```

```tsx
import { ApolloClient, InMemoryCache, ApolloProvider, gql, useQuery } from "@apollo/client";

const client = new ApolloClient({
  uri: "https://api.spacex.land/graphql",
  cache: new InMemoryCache(),
});

const GET_LAUNCHES = gql`
  query GetLaunches {
    launchesPast(limit: 5) {
      id
      mission_name
      launch_date_local
    }
  }
`;

function Launches() {
  const { loading, error, data } = useQuery(GET_LAUNCHES);
  if (loading) return <p>Loading...</p>;
  if (error) return <p>{error.message}</p>;
  return <ul>{data.launchesPast.map((l: any) => <li key={l.id}>{l.mission_name}</li>)}</ul>;
}

function App() {
  return <ApolloProvider client={client}><Launches /></ApolloProvider>;
}
```

## Intro

Apollo Client is the industry-leading GraphQL client for TypeScript and JavaScript. Used by thousands of production apps, it offers a comprehensive caching layer, optimistic UI, local state management, pagination helpers, and SSR support. Official bindings for React, Vue, Angular, and a framework-agnostic core.

- **Repo**: https://github.com/apollographql/apollo-client
- **Stars**: 19K+
- **Language**: TypeScript
- **License**: MIT

## What Apollo Client Does

- **Normalized cache** — entities deduped by `__typename:id`
- **Query hooks** — `useQuery`, `useMutation`, `useSubscription`, `useLazyQuery`, `useFragment`
- **Optimistic UI** — local cache updates before server confirms
- **Pagination** — fetchMore with offset or cursor-based
- **Local state** — client-side schema and resolvers
- **SSR** — server-rendered queries with hydration
- **Subscriptions** — GraphQL subscriptions via WebSocket
- **Codegen** — TypeScript types from schema

## Architecture

Queries execute through a link chain (auth, error, retry, http). Responses are normalized into the InMemoryCache. Components subscribe to cache via hooks and re-render on cache changes. Mutations can update cache via `refetchQueries`, `update()`, or optimistic responses.

## Self-Hosting

Client-only library.

## Key Features

- Normalized caching by `__typename:id`
- Optimistic UI updates
- Pagination helpers
- Local state management
- SSR support
- WebSocket subscriptions
- Apollo DevTools browser extension
- Multi-framework (React, Vue, Angular)
- TypeScript codegen integration

## Comparison

| Client | Cache | Type Safety | Bundle | Subscriptions |
|---|---|---|---|---|
| Apollo Client | Normalized | Codegen | ~32KB | Yes |
| URQL | Document | Codegen | ~10KB | Yes |
| Relay | Normalized + compiler | Compile-time | ~20KB | Yes |
| TanStack Query + gql | Document | Manual | ~12KB | Manual |
| SWR + gql | Document | Manual | ~5KB | Manual |

## 常见问题 FAQ

**Q: Apollo vs URQL？**
A: Apollo 功能最全、缓存最智能，但 bundle 较大。URQL 更轻、API 更简，适合小型应用。

**Q: 没有 GraphQL Server 能用吗？**
A: 能。`apollo-link-rest` 可以把 REST 接口包装成 GraphQL；或者用 Apollo 客户端状态管理本地数据。

**Q: 需要 codegen 吗？**
A: 强烈建议。`graphql-codegen` 从 schema 和 operations 生成类型，杜绝运行时类型错误。

## 来源与致谢 Sources

- Docs: https://www.apollographql.com/docs/react
- GitHub: https://github.com/apollographql/apollo-client
- License: MIT

---
Source: https://tokrepo.com/en/workflows/70e5ac06-35a3-11f1-9bc6-00163e2b0d79
Author: AI Open Source