# 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 has the most features and the smartest caching, but a larger bundle. URQL is lighter with a simpler API, well-suited to smaller apps.

**Q: Can I use it without a GraphQL server?**
A: Yes. `apollo-link-rest` wraps REST endpoints as GraphQL, or you can use Apollo's client-side state management for local data.

**Q: Do I need codegen?**
A: Strongly recommended. `graphql-codegen` generates types from your schema and operations, eliminating runtime type errors.

## Sources & Credits

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

---
Source: https://tokrepo.com/en/workflows/apollo-client-industry-leading-graphql-client-ts-js-70e5ac06
Author: AI Open Source