Platform
Pricing

THE APOLLO PLATFORM

An integrated solution to take you from a POC to a centralized graph, across thousands of engineers.

Learn more

REQUEST A DEMO

Tools for collaboration, observability, federation, and more.

See how we can help

APOLLO STUDIO

Develop

A central access point and hub for your team to stay up-to-date.

Deliver

Automatic tests for breaking changes in CI, and more.

Observe

Full insight into exactly how your graph is being used.

OPEN SOURCE

Apollo Client

Manage your full app's state and connect to queries seamlessly.

Apollo Federation

A single graph composed from multiple underlying services.

Tooling

Devtools and editor extensions for support directly in your workflow.

DEVELOPERS

Docs
Hands-on Training
EventsNEW

FEATURED EVENTS

GraphQL Summit

ENTERPRISE

ResourcesNEW

Learn how to build and scale your graph.

Learn more about how we can help you make one uniform graph for your entire organization.

Learn how Apollo is transforming the way industry leaders build apps.

Read Apollo’s guide to scaling GraphQL in the Enterprise

ABOUT US

Leadership
Open Positions
Sign inCreate Account

   Web

   iOS

   Android

APOLLO CLIENT

Bind GraphQL data to your UI with one function call

Help your team focus on what your product needs, not how to get it. Declare your data and Apollo Client will handle the rest. Never worry about caching, network status, or getting data into your UI ever again.

   Read the Docs
import { gql, useQuery } from '@apollo/client';

const Username = () => {
  const { loading, error, data } = useQuery(gql`
    {
      me {
        username
      }
    }
  `);

  if (loading) return <text>Loading...</text>;
  if (error) return (
    <text>Error! ${error.message}</text>
  );
  if (!data || !data.user) return (
    <text>Could not find user :(</text>
  );

  return (
    <text>Your username: {data.me.username}</text>
  );
}
self.label.text = "Loading..."
apolloClient.fetch(query: GetViewerQuery()) { [weak self] result in 
  guard let self = self else { return }
  switch result {
  case .success(let graphQLResult):
    guard let username = graphQLResult.data?.user?.username else { 
      self.label.text = "Could not find user :(")
      return 
    }
    self.label.text = "Welcome, (username)"!
  case .failure(let error):
    self.label.text = "Error: (error.description)"
  }
}
lifecycleScope.launchWhenResumed {
  label.text = "Loading..."
  try {
      val response = apolloClient.query(GetViewerQuery()).toDeferred.await()
      val username = response.data?.user?.username
      if (username == null) {
          label.text = "Could not find user :("
      } else {
          label.text = "Welcome $username"
      }
  } catch (e: ApolloException) {
      label.text = "Error! ${e.message}"
  }
}

apollographql/apollo-client

Star16k

Free. Forever.

We believe in giving developers access to powerful open source tools. You will never be asked to pay for Apollo Client. Ever.

What is Apollo Client?

Apollo Client is a way to consume a graph. Apollo, as a company, gives you multiple libraries to this that are suited to wherever you’re building your app: web, ios, and android. Apollo Client is about binding your data to your UI with GraphQL.

Apollo Client DevTools

Declarative data fetching

Write a query and receive data without manually tracking loading, error, or network states.

Reactive data cache

Cut down on network traffic and keep data consistent throughout your application with Apollo Client’s normalized reactive data cache.

Excellent dev experience

Enjoy cross stack type safety, runtime cache inspectors, and full featured editor integrations to keep you writing applications faster.

Compatible and adoptable

Use any build setup and any GraphQL API. Drop Apollo Client into any app seamlessly without re-architecting your entire data strategy.

Designed for modern UIs

Take advantage of modern UI architectures in the web, iOS, and Android ecosystems.

Community driven

Share knowledge with thousands of developers, thanks to our active open source community.

Cache Normalization

Any library or framework can send a query to a GraphQL endpoint. Where Apollo Client shines is in its result caching. It uses a normalized cache to dramatically speed up the feel of your application. By reducing the number of network requests made to your GraphQL server, the cache improves the responsiveness of your application client while automatically keeping UI components up to date as new data is fetched.

Visit Docs

THE WORLD'S MOST POPULAR GRAPHQL CLIENT

2,000,000+ weekly downloads

Download Now

Hear from our customers

"Apollo is the de facto standard GraphQL implementation, but we were also pleasantly surprised to find built-in support for things like caching, deduplication, and error handling. You just write the code that’s specific to interacting with your backend, and Apollo takes care of the rest."

Neil Lokare @ Nerdwallet

NerdWallet builds better apps, faster with a graph.

Read more

"In a build vs. buy decision, Apollo Platform was a clear buy. We wanted to deliver the promise of GraphQL to our developers now rather than later."

Mark Stuart @ PayPal

Modernizing digital payments with a graph at PayPal

Read more

"We have developed a very close working relationship with the Apollo team. We talk to them almost every day, which is critical to ensuring that we can help our customers through both good times and difficult times."

Sankha Pathak @ Glassdoor

Unifying Glassdoor’s data with Apollo Federation

Read more

Customizable features

Specify the data you want with a GraphQL query and Apollo Client gets it for you automatically. Then, simply add on advanced data management features as you need them.

   Visit Docs

Cache Policies

Reactivity

Pagination

Subscriptions

React

const cache = new InMemoryCache({
  typePolicies: {
    Person: {
      fields: {
        name: {
          read(name) {
            // Return cached name, upper-cased:
            return name.toUpperCase();
          }
        }
      },
    },
  },
});
import { InMemoryCache, makeVar, gql, useQuery } from "@apollo/client";
const darkModeVar = makeVar(false);
const cache = new InMemoryCache({
  typePolicies: {
    Query: {
      fields: {
        darkModeEnabled() {
          return darkModeVar();
        },
      },
    },
  },
});
function App() {
  const { data, loading } = useQuery(
    gql`query { darkModeEnabled @client }`,
  );
  return loading ? <Loading/> :
    <div className={data.darkModeEnabled ? "dark" : "light"}>...</div>;
}
const toggleDarkMode = () => darkModeVar(!darkModeVar());
import { ApolloClient, InMemoryCache } from "@apollo/client";
import { relayStylePagination } from "@apollo/client/utilities";

const client = new ApolloClient({
  uri: "https://metaphysics-production.artsy.net/",
  cache: new InMemoryCache({
    typePolicies: {
      Query: {
        fields: {
          search: relayStylePagination(["query"]),
        },
      },
    },
  }),
});
const COMMENTS_SUBSCRIPTION = gql`
  subscription OnCommentAdded($postID: ID!) {
    commentAdded(postID: $postID) {
      id
      content
    }
  }
`;
function LatestComment({ postID }) {
  const { data: { commentAdded }, loading } = useSubscription(
    COMMENTS_SUBSCRIPTION,
    { variables: { postID } }
  );
  return <h4>New comment: {!loading && commentAdded.content}</h4>;
}
import { gql, useQuery } from '@apollo/client';
const GET_DOGS = gql`
  query GetDogs {
    dogs {
      id
      breed
    }
  }
`;
function Dogs() {
  const { loading, error, data } = useQuery(GET_DOGS);
  if (loading) return 'Loading...';
  if (error) return `Error! ${error.message}`;
  return (
    <ul>
      {data.dogs.map(dog => <li key={dog.id}>{dog.breed}</li>)}
    </ul>
  );
}

Suggested Reading