Product
Pricing

THE SUPERGRAPH

A new, powerful composition engine for your business and teams.

Explore the stack

REQUEST A DEMO

Tools for collaboration, observability, federation, and more.

See how we can help

GraphOS

The supergraph platform. Build, operate and evolve the supergraph.

Apollo Client

The world’s leading GraphQL client for React, iOS, and Kotlin.

Apollo Server

A TypeScript GraphQL Server for Express, Koa, Lambda, and more.

DEVELOPERS

Docs
GraphQL Tutorials
DevHub
Blog
Community
Events
YouTube

FEATURED EVENTS

GraphQL Summit
[Webinar On-Demand] 10 Best Practices for Schema Governance

Discover the supergraph for your industry.

Delivering rapid success on projects with world-class GraphOS and GraphQL expertise.

Explore tech talks, workshops, product updates & more.

Learn how to build and scale your graph.

Learn how Apollo's solutions and expertise can help you deliver innovation with a unified graph.

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

Your hub for up-to-date information on Apollo’s security, reliability, and policies.

ABOUT US

Leadership
Careers
Open Positions
Our Team
Partners

SUPPORT

Contact Sales
Get Help
Apollo Help Center
Terms of Service
Privacy Policy
Contact Sales
Create Account
Satellite image
Satellite image

   Web

   iOS

   Android

APOLLO CLIENT

Bind GraphQL data to your UI with one function call

   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}"
  }
}

Free. Forever.

What is Apollo Client?

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

Visit Docs

THE WORLD'S MOST POPULAR GRAPHQL CLIENT

2,000,000+ weekly downloads

Download Now

Hear from our customers

NerdWallet

"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

Neil Lokare @ NerdWallet

NerdWallet builds better apps, faster with a graph.

Read more about NerdWallet
PayPal

"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

Mark Stuart @ PayPal

Modernizing digital payments with a graph at PayPal

Read more about PayPal
Glassdoor

"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 about Glassdoor

Customizable features

   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>
  );
}

© 2024 Apollo Graph Inc.

Github icontwitter iconspectrum iconyoutube icon

Company