A simple yet functional GraphQL client.
Apollo Client is a comprehensive GraphQL state management library that handles data fetching, caching, and state synchronization for JavaScript applications. With over 400,000 weekly downloads, it's the industry-standard solution for consuming GraphQL APIs without writing raw HTTP request logic or managing complex data synchronization patterns.
The library provides a zero-configuration caching layer that automatically normalizes and stores query results, preventing duplicate network requests and keeping UI components reactive to data changes. It abstracts away the complexities of loading states, error handling, and cache invalidation while offering deep customization through cache policies and field-level configurations when needed.
Apollo Client works across all major JavaScript frameworks (React, Vue, Angular, Svelte) and vanilla JavaScript environments. It's designed to manage both remote API data and local application state through a unified cache, eliminating the need for separate state management libraries in many cases. The library is TypeScript-first and supports modern React features including Suspense and Server Components.
import { ApolloClient, InMemoryCache, gql } from 'apollo-client';
import { HttpLink } from 'apollo-link-http';
const client = new ApolloClient({
link: new HttpLink({ uri: 'https://api.example.com/graphql' }),
cache: new InMemoryCache()
});
const GET_USER = gql`
query GetUser($id: ID!) {
user(id: $id) {
id
name
email
}
}
`;
const UPDATE_USER = gql`
mutation UpdateUser($id: ID!, $name: String!) {
updateUser(id: $id, name: $name) {
id
name
}
}
`;
async function fetchAndUpdateUser() {
try {
const { data } = await client.query({
query: GET_USER,
variables: { id: '123' }
});
console.log('Fetched user:', data.user);
const { data: mutationData } = await client.mutate({
mutation: UPDATE_USER,
variables: { id: '123', name: 'Jane Doe' },
optimisticResponse: {
updateUser: {
__typename: 'User',
id: '123',
name: 'Jane Doe'
}
}
});
console.log('Updated user:', mutationData.updateUser);
} catch (error) {
console.error('GraphQL error:', error);
}
}
fetchAndUpdateUser();Building data-driven UI components where you need to fetch GraphQL data and automatically re-render components when related data changes, without manually managing subscriptions or cache updates.
Optimistic UI updates in applications like social feeds or collaborative tools where you want to immediately reflect user actions (likes, comments, edits) in the UI before the server confirms the mutation, rolling back only if the request fails.
Offline-first mobile or PWA applications that require intelligent caching strategies to display previously fetched data when network connectivity is unavailable, with automatic refetching when connection is restored.
Real-time dashboards using GraphQL subscriptions where you need to keep multiple components synchronized with live server updates, with Apollo Client automatically updating all affected queries in the cache.
Replacing Redux or other state management in applications where most state derives from API data, consolidating remote and local state management into a single system with less boilerplate than traditional flux patterns.
npm install apollo-clientpnpm add apollo-clientbun add apollo-client