@apollo/client
Advanced tools
The @apollo/client npm package is a comprehensive state management library for JavaScript that enables you to manage both local and remote data with GraphQL. It is designed to help you develop faster and more secure apps with less boilerplate. It integrates seamlessly with any JavaScript front-end, allowing for reactive data fetching, caching, and data management.
Fetching data with useQuery
This feature allows you to fetch data from a GraphQL server. The useQuery hook is used to execute a GraphQL query and handle loading, error, and result states.
import { useQuery, gql } from '@apollo/client';
const GET_LAUNCHES = gql`
query GetLaunches {
launches {
id
mission_name
}
}
`;
function Launches() {
const { loading, error, data } = useQuery(GET_LAUNCHES);
if (loading) return <p>Loading...</p>;
if (error) return <p>Error :(</p>;
return data.launches.map(({ id, mission_name }) => (
<div key={id}>
<p>{mission_name}</p>
</div>
));
}Updating data with useMutation
This feature enables you to update data on a GraphQL server. The useMutation hook is used to execute a mutation, allowing you to create, update, or delete data.
import { useMutation, gql } from '@apollo/client';
const ADD_TODO = gql`
mutation AddTodo($type: String!) {
addTodo(type: $type) {
id
type
}
}
`;
function AddTodo() {
let input;
const [addTodo, { data }] = useMutation(ADD_TODO);
return (
<div>
<form
onSubmit={e => {
e.preventDefault();
addTodo({ variables: { type: input.value } });
input.value = '';
}}
>
<input
ref={node => {
input = node;
}}
/>
<button type="submit">Add Todo</button>
</form>
</div>
);
}Managing local state
This feature allows you to manage local state using Apollo Client. You can read and write to the cache as if it were a local database, enabling you to manage client-side state alongside remote data.
import { gql, useApolloClient } from '@apollo/client';
const GET_LOCAL_STATE = gql`
query GetLocalState {
isLoggedIn @client
}
`;
function LoginButton() {
const client = useApolloClient();
const data = client.readQuery({ query: GET_LOCAL_STATE });
const isLoggedIn = data.isLoggedIn;
return (
<button onClick={() => {
client.writeQuery({
query: GET_LOCAL_STATE,
data: { isLoggedIn: !isLoggedIn }
});
}}>
{isLoggedIn ? 'Log out' : 'Log in'}
</button>
);
}Relay is a JavaScript framework for building data-driven React applications with GraphQL. It is similar to @apollo/client in that it provides a powerful and efficient way to fetch and manage GraphQL data. Relay focuses on performance optimizations and static query generation, which can make it more suitable for complex, large-scale applications with high performance requirements.
urql is a highly customizable and versatile GraphQL client for React, Vue, Svelte, and other JavaScript frameworks. It offers a simpler and more flexible approach compared to @apollo/client, with features like document caching and subscriptions. urql's extensibility and plugin system make it a good choice for developers looking for a lightweight and adaptable GraphQL client.
The industry-leading GraphQL client for TypeScript, JavaScript, React, Vue, Angular, and more. Apollo Client delivers powerful caching, intuitive APIs, and comprehensive developer tools to accelerate your app development.
➡️ Get Started with Apollo Client →
✅ Zero-config caching - Intelligent caching out of the box
✅ Framework agnostic - Works with React, Vue, Angular, Svelte, and vanilla JavaScript
✅ TypeScript-first - Full type safety and IntelliSense support
✅ React 19 ready - Supports Suspense, RSC, Compiler, and more
✅ Production-tested - Powers countless apps worldwide that serve millions of end users
npm install @apollo/client graphql
| Resource | Description | Link |
|---|---|---|
| Getting Started Guide | Complete setup and first query | Start Here → |
| Full Documentation | Comprehensive guides and examples | Read Docs → |
| API Reference | Complete API documentation | Browse API → |
| VS Code Extension | Enhanced development experience | Install Extension → |
| DevTools | Debug your GraphQL apps | Chrome | Firefox |
| Free Course | Learn GraphQL and Apollo Client | Take Course → |
Need help? We're here for you:
Deliver tomorrow's roadmap today with our comprehensive suite of API orchestration tools:
Explore the Complete Apollo Platform →
| Name | Username |
|---|---|
| Jeff Auriemma | @bignimbus |
| Jerel Miller | @jerelmiller |
| Lenz Weber-Tronic | @phryneas |
We regularly update our public roadmap with the status of our work-in-progress and upcoming features.
| ☑️ Apollo Client User Survey |
|---|
| What do you like best about Apollo Client? What needs to be improved? Please tell us by taking a one-minute survey. Your responses will help us understand Apollo Client usage and allow us to serve you better. |
Join these live events to meet other GraphQL users and learn more:
🎪 GraphQL Summit 2025
Oct 6-8, 2025 • San Francisco
1000+ engineers, talks, workshops, and office hours
🌟 GraphQLConf 2025
Sep 8-10, 2025 • Amsterdam
Celebrating 10 Years of GraphQL
Thank you for your interest in submitting a Pull Request to Apollo Client! Read our guidelines first, and don't hesitate to get in touch.
New to open source? Check out our Good First Issues to get started.
Please read our Code of Conduct. This applies to any space run by Apollo, including our GitHub repositories, the Apollo GraphOS Discord, the Apollo GraphQL Forum. The Code of Conduct reflects our commitment to making the Apollo Community a welcoming and safe space in which individuals can interact.
Source code in this repository is available under the terms of the MIT License. Read the full text here.
FAQs
A fully-featured caching GraphQL client.
The npm package @apollo/client receives a total of 2,926,035 weekly downloads. As such, @apollo/client popularity was classified as popular.
We found that @apollo/client demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 3 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
npm now supports Trusted Publishing with OIDC, enabling secure package publishing directly from CI/CD workflows without relying on long-lived tokens.
Research
/Security News
A RubyGems malware campaign used 60 malicious packages posing as automation tools to steal credentials from social media and marketing tool users.
Security News
The CNA Scorecard ranks CVE issuers by data completeness, revealing major gaps in patch info and software identifiers across thousands of vulnerabilities.