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

What it is

Apollo Client is a comprehensive GraphQL client for TypeScript and JavaScript applications. It provides a normalized in-memory cache, declarative data fetching via hooks, optimistic UI updates, real-time subscriptions, and browser devtools for inspecting cache state.

Frontend developers building React, Vue, or Angular apps that consume GraphQL APIs use Apollo Client to handle data fetching, caching, and state management in one layer rather than juggling multiple libraries.

How it saves time or tokens

Apollo Client's normalized cache eliminates redundant network requests. When a query fetches an entity by ID, subsequent queries referencing the same entity read from cache instead of hitting the server. This reduces both API call volume and latency.

Optimistic UI lets you update the interface before the server confirms a mutation, making the app feel instant. Combined with automatic cache updates, this replaces manual state synchronization code that would otherwise take hundreds of lines.

How to use

1. Install Apollo Client and GraphQL:

npm i @apollo/client graphql

1. Create a client instance pointing to your GraphQL endpoint and wrap your app with ApolloProvider.

1. Use the useQuery hook in any component to fetch data:

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

const GET_USERS = gql`
  query GetUsers {
    users { id name email }
  }
`;

function UserList() {
  const { loading, error, data } = useQuery(GET_USERS);
  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error.message}</p>;
  return (
    <ul>
      {data.users.map((u: any) => (
        <li key={u.id}>{u.name}</li>
      ))}
    </ul>
  );
}

Example

Setting up an Apollo Client with InMemoryCache:

import { ApolloClient, InMemoryCache } from '@apollo/client';

const client = new ApolloClient({
  uri: 'https://api.example.com/graphql',
  cache: new InMemoryCache({
    typePolicies: {
      User: { keyFields: ['id'] },
    },
  }),
});

The typePolicies config tells the cache how to normalize entities by their unique key fields.

Related on TokRepo

• Coding Tools -- Developer tools for building and debugging web applications
• Automation Tools -- Automate GraphQL schema generation and testing pipelines

Common pitfalls

• Cache normalization requires unique id or _id fields on every type. If your schema uses non-standard key fields, configure typePolicies.keyFields or queries will not merge correctly.
• Over-fetching with deeply nested queries can bloat the cache. Use fragments and field policies to keep cache size manageable.
• Subscriptions require a separate WebSocket link. Forgetting to configure split between HTTP and WS links is a frequent setup error.