Docs
Launch GraphOS Studio

Why Apollo Client?

Why choose Apollo Client to manage your data?


is a state management library that simplifies managing remote and local data with . Apollo Client's intelligent caching and declarative approach to data fetching can help you iterate faster while writing less code. Additionally, if you need custom functionality, you can create your dream client by building on top of Apollo Client.

Let's jump right into what Apollo Client can offer you! 🚀

Declarative data fetching

Apollo Client handles the request cycle from start to finish, including tracking loading and error states. There's no middleware or boilerplate code to set up before making your first request, and you don't need to worry about transforming or caching responses. All you have to do is describe the data your component needs and let Apollo Client do the heavy lifting. 💪

's useQuery hook leverages React's Hooks API to bind a to a component, enabling that component to render a query's results immediately. The useQuery hook encapsulates the logic for retrieving your data, tracking loading and error states, and updating your UI. This encapsulation makes integrating results into your presentational components a breeze!

Let's see what this looks like in practice with for React:

function ShowDogs() {
const { loading, error, data } = useQuery(GET_DOGS);
if (error) return <Error />;
if (loading) return <Fetching />;
return <DogList dogs={data.dogs} />;
}

In the example above, we're using the useQuery hook to fetch dogs from our and display them in a list. Once our data comes back, our <DogList /> component reactively updates to display the new data.

When switching to , you'll find you can remove much of your previous code related to data management. Some teams have reported deleting thousands of lines of code!

Though you'll find yourself writing less code with , that doesn't mean you have to compromise on features. The useQuery hook supports advanced features like an optimistic UI, refetching, and pagination.

Combining local & remote data

Thousands of developers have told us that excels at managing remote data, equating to roughly 80% of their data needs. But what about local data (e.g., global flags or device API results), which makes up the other 20% of the pie?

includes local state management features straight out of the box, enabling you to use your Apollo cache as the single source of truth for your application's data.

By using 's local state functionality, you can include local and remotely fetched in the same :

const GET_DOG = gql`
query GetDogByBreed($breed: String!) {
dog(breed: $breed) {
images {
url
id
isLiked @client
}
}
}
`;

In the above example, we're the local-only field isLiked while fetching data from our . Your components contain local and remote data; now, your queries can too!

Managing your data with lets you take advantage of as a unified interface for all of your data. Using the Apollo Client Devtools, you can inspect both your local and remote schemas using .

Zero-config caching

Caching a is no easy task, but we've spent years solving this problem. We've found that normalization is the key to maintaining consistent data across multiple components in an application.

One of the key features that sets apart from other data management solutions is its local, in-memory, normalized cache.

The cache is easy to get started with and configure as you go:

import { ApolloClient, InMemoryCache } from '@apollo/client';
const client = new ApolloClient({
cache: new InMemoryCache(),
});

Once you've passed your cache to ApolloClient, whenever receives response data, it automatically attempts to identify and store the distinct objects (i.e., those with a __typename and an id property) from a 's data into separate entries within its cache.

Let's look at some practical examples of how this caching mechanism can make your application more efficient.

The below , GET_ALL_DOGS, fetches a list of dogs and information about each dog:

const GET_ALL_DOGS = gql`
query GetAllDogs {
dogs {
id
breed
displayImage
}
}
`;

The below , UPDATE_DISPLAY_IMAGE, updates a specified dog's displayImage and returns the updated dog:

const UPDATE_DISPLAY_IMAGE = gql`
mutation UpdateDisplayImage($id: String!, $displayImage: String!) {
updateDisplayImage(id: $id, displayImage: $displayImage) {
id
displayImage
}
}
`;

When we run the UPDATE_DISPLAY_IMAGE , we want to ensure that our dog's image is updated everywhere in our application. We also need to ensure we update any previously cached data about that dog.

Our UPDATE_DISPLAY_IMAGE returns the object the mutation modified (i.e., the id and displayImage of the dog), enabling to automatically overwrite the existing of any previously cached object with the same id. Tying it all together, if we've already run the GET_ALL_DOGS before runs the UPDATE_DISPLAY_IMAGE , it automatically updates the changed dog's displayImage in our local cache.

For more examples of updating a cache with , see Updating the cache directly.

The ability to update our cache under the hood can also help in scenarios where we want to avoid refetching information already contained in our cache.

For example, let's say we want to navigate to the details page for a particular dog. Here's what the would look like:

const GET_DOG = gql`
query GetDog {
dog(id: "abc") {
id
breed
displayImage
}
}
`;

If we've run the above GET_ALL_DOGS at any point, the data for our GET_DOG might already be in our local cache. We can tell where to check first for any cached Dog objects, avoiding refetching information if it already exists in our cache.

Below we define a custom FieldPolicy that returns a reference to our previously cached Dog object data:

import { ApolloClient, InMemoryCache } from '@apollo/client';
const cache = new InMemoryCache({
typePolicies: {
Query: {
fields: {
dog(_, { args, toReference }) {
return toReference({
__typename: 'Dog',
id: args.id,
});
},
},
},
},
});
const client = new ApolloClient({ cache });

The above policy enables our GET_DOG to read previously stored data straight from our cache instead of sending off an unnecessary query.

Learn more about Caching in Apollo Client.

Vibrant ecosystem

is easy to get started with but extensible enough for when you want to build out more advanced features. If you need custom functionality that @apollo/client doesn't cover, you can use Apollo Link's architecture to create your dream client by building an extension on top of .

We're always impressed by what our contributors have built on top of . Check out some of our community's below:

When you choose to use to manage your data, you also gain the support of our fantastic community. There are thousands of developers in our community forums for you to share ideas with.

You can also read articles on best practices and announcements on the frequently updated Apollo blog.

Case studies

Companies ranging from enterprises to startups trust to power their most critical web and native applications. If you'd like to learn more about how transitioning to and Apollo simplified engineers' workflows and improved companies' products, check out these case studies:

  • The New York Times: Learn how The New York Times switched from Relay to Apollo & implemented features in their app such as SSR and .
  • Express: Easy-to-use pagination with Apollo helped improve the Express eCommerce team's key product pages.
  • Major League Soccer: MLS' switch from Redux to Apollo for state management enabled them to delete nearly all of their Redux code.
  • Expo: Developing their React Native app with Apollo enabled the Expo engineers to focus on improving their product instead of writing data fetching logic.
  • KLM: Learn how the KLM team scaled their Angular app with and Apollo.

If your company uses in production, we'd love to feature a case study on our blog! Please get in touch via our community forums so we can learn more about how you're using Apollo. Alternatively, please file a PR if you already have a blog post or a conference talk that you'd like to feature here.

Previous
Introduction
Next
Get started
Edit on GitHubEditForumsDiscord

© 2024 Apollo Graph Inc.

Privacy Policy

Company