Client
@apollo/client
A fully-featured caching GraphQL client.
Charts
apollo
graphql
react
hooks
client
cache
tanstack-intent
@apollo/client
Charts
javascript
Stars
20k
Weekly
3.2M
Open issues
409
Bundle
~25 kB
Installation
npm install @apollo/clientCode example
import { ApolloClient, InMemoryCache, ApolloProvider, gql, useQuery } from "@apollo/client";
const client = new ApolloClient({
uri: "https://countries.trevorblades.com/",
cache: new InMemoryCache(),
});
const QUERY = gql`
query {
countries { code name }
}
`;
export function Example() {
return (
<ApolloProvider client={client}>
<Countries />
</ApolloProvider>
);
}
function Countries() {
const { data, loading } = useQuery(QUERY);
if (loading) return <p>Loading…</p>;
return <pre>{JSON.stringify(data, null, 2)}</pre>;
}Pros & cons
Pros
- Actively maintained by packages@apollographql.com
- 3.2M weekly downloads. Battle tested
- First-class TypeScript definitions
- MIT licensed
Considerations
- Adds roughly ~25 kB to your bundle
- Needs client-only rendering in SSR frameworks
- Not supported in React Native
- 409 open issues on GitHub