Why Apollo Client?

Why choose Apollo Client to manage your data?

Data is life and data management, shouldn't be a nightmare. Apollo Clients simplifies the management of remote data in react application. It amazing features like intelligent caching and declarative approach to data fetching can help us iterate faster while writing less code.

Declarative data fetching

With Apollo's declarative approach to data fetching, all of the logic for retrieving your data, tracking loading and error states, and updating your UI is encapsulated by the useQuery Hook. This encapsulation makes integrating query results into your presentational components a walk away! Let's see what this looks like in practice with React Apollo:

function Feed() {
  const { loading, error, data } = useQuery(GET_CATS);
  if (error) return <Error />;
  if (loading || !data) return <Fetching />;
  return <CatList cats={data.cats} />;
}

In the above code snippet, we're using the useQuery Hook to fetch some cats from our GraphQL server and display them in a list. useQuery leverages React's Hooks API to bind a query to our component and render it based on the results of our query. Once our data comes back, our <CatList /> component will update reactively with the data it needs.

Apollo Client takes care of the request cycle from start to finish, including tracking loading and error states for you. There's no middleware to set up or boilerplate to write before making your first request, nor do you need to worry about transforming and caching the response. All you have to do is describe the data your component needs and let Apollo Client do the heavy lifting.

Zero-config caching

One of the key features that sets Apollo Client apart from other data management solutions is its normalized cache. Just by setting up Apollo Client, you get an intelligent cache out of the box with no additional configuration required.

Combine local & remote data

Apollo Client includes local state management features out of the box, that allow you to use your Apollo cache as the single source of truth for data in your application.

Managing all your data with Apollo Client allows you to take advantage of GraphQL as a unified interface to all of your data. This enables you to inspect both your local and remote schemas in Apollo DevTools through GraphQL.

const GET_CAT = gql`
  query GetCatByBreed($breed: String!) {
    cat(breed: $breed) {
      images {
        url
        id
        isLiked @client
      }
    }
  }
`;

By leveraging Apollo Client's local state functionality, you can add client-side only fields to your remote data seamlessly and query them from your components. In the example above, we're querying the client-only field isLiked alongside our server data. Your components are made up of local and remote data, now your queries can be too!

Vibrant ecosystem

Apollo Client is easy to get started with, but extensible for when you need to build out more advanced features. If you need custom functionality that isn't covered with apollo-boost, such as app-specific middleware or cache persistence, you can create your own client by plugging in an Apollo cache and chaining together your network stack with Apollo Link.

This flexibility makes it simple to create your dream client by building extensions on top of Apollo.

Here are some of the extensions built on Apollo by its vibrant ecosystem, to help in making application development with Apollo seamlessly.

• Apollo Link community links: Pluggable links created by the community
• apollo-cache-persist: Simple persistence for your Apollo cache (@jamesreggio)
• apollo-storybook-decorator: Wrap your React Storybook stories with Apollo Client (@abhiaiyer91)
• AppSync by AWS: Amazon's real-time GraphQL client uses Apollo Client under the hood

Previous: Introduction
Next: Get started: Set up Apollo Client in your React app