class ApolloClient

Last update on July 25 2024 17:33:06 (UTC/GMT +8 hours)

The ApolloClient class encapsulates Apollo's core client-side API. It backs all available view-layer integrations (React, iOS, and so on).

Constructs an instance of ApolloClient

The constructor for ApolloClient accepts an ApolloClientOptions object that supports the required and optional fields listed below. These fields make it easy to customize how Apollo works based on your application's needs.

Example constructor call

import {ApolloClient } from 'apollo-client';
import {InMemoryCache } from 'apollo-cache-inmemory';
import {HttpLink } from 'apollo-link-http';
// Instantiate required constructor fields
const cache = new InMemoryCache();
const link = new HttpLink({
  uri: 'http://localhost:4000/',
});
const client = new ApolloClient({
  // Provide required constructor fields
  cache: cache,
  link: link,
  // Provide some optional constructor fields
  name: 'react-web-client',
  version: '1.3',
  queryDeduplication: false,
  defaultOptions: {
    watchQuery: {
      fetchPolicy: 'cache-and-network',
    },
  },
});

Required fields

NAME	DESCRIPTION
link	Apollo Client uses an Apollo Link instance to serve as its network layer. The vast majority of clients use HTTP and should provide an instance of HttpLink from the apollo-link-http package.
cache	Apollo Client uses an Apollo Cache instance to handle its caching strategy. The recommended cache is apollo-cache-inmemory, which exports an {InMemoryCache }.

Optional fields

NAME	DESCRIPTION
name	A custom name (e.g., iOS) that identifies this particular client among your set of clients. Apollo Server uses this property as part of its Client Awareness feature.
version	A custom version that identifies the current version of this particular client (e.g., 1.2). Apollo Server uses this property as part of its Client Awareness feature.
ssrMode	When using Apollo Client for server-side rendering, set this to true so that React Apollo's getDataFromTree function can work effectively.
ssrForceFetchDelay	Provide this to specify a time interval (in milliseconds) before Apollo Client force-fetches queries after a server-side render. This value is 0 by default.
connectToDevTools	Set this to true to allow the Apollo Client Devtools Chrome extension to connect to your application's Apollo Client in production. (This connection is allowed automatically in dev mode.)
queryDeduplication	Set this to false to force all created queries to be sent to the server, even if a query with completely identical parameters (query, variables, operationName) is already in flight.
defaultOptions	Provide this object to set application-wide default values for options you can provide to the watchQuery, query, and mutate functions. See below for an example object.

Example defaultOptions object

const defaultOptions = {
  watchQuery: {
    fetchPolicy: 'cache-and-network',
    errorPolicy: 'ignore',
  },
  query: {
    fetchPolicy: 'network-only',
    errorPolicy: 'all',
  },
  mutate: {
    errorPolicy: 'all',
  },
};

You can override any default option you specify in this object by providing a different value for the same option in individual function calls.

Note: The <Query/> React component uses Apollo Client's watchQuery function. To set defaultOptions when using the <Query /> component, make sure to set them under the defaultOptions.watchQuery property.

ApolloClient functions

This watches the cache store of the query according to the options specified and returns an ObservableQuery. We can subscribe to this ObservableQuery and receive updated results through a GraphQL observer when the cache store changes.

ObservableQuery functions

ApolloClient Observables extend the Observables implementation provided by zen-observable.

Previous: @apollo/react-ssr
Next: @apollo/react-common