Docs
Launch GraphOS Studio

class ApolloClient

API reference


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

The ApolloClient constructor

constructor(options): ApolloClient<TCacheShape>

(src/core/ApolloClient.ts, line 131)

Constructs an instance of ApolloClient.

Takes an ApolloClientOptions parameter that supports the fields listed below.

Returns an initialized ApolloClient object.

Example

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

Options

Name /
Type
Description
uri

String

The URI of the GraphQL endpoint that Apollo Client will communicate with.

One of uri or link is required. If you provide both, link takes precedence.

ApolloLink

You can provide an Apollo Link instance to serve as Apollo Client's network layer. For more information, see Advanced HTTP networking.

One of uri or link is required. If you provide both, link takes precedence.

cache

ApolloCache (usually InMemoryCache)

Required. The cache that Apollo Client should use to store query results locally. The recommended cache is InMemoryCache, which is provided by the @apollo/client package.

For more information, see Configuring the cache.

name

String

A custom name (e.g., iOS) that identifies this particular client among your set of clients. Apollo Server and Apollo Studio use this property as part of the client awareness feature.

version

String

A custom version that identifies the current version of this particular client (e.g., 1.2). Apollo Server and Apollo Studio use this property as part of the client awareness feature.

This is not the version of Apollo Client that you are using, but rather any version string that helps you differentiate between versions of your client.

ssrMode

Boolean

When using Apollo Client for server-side rendering, set this to true so that the getDataFromTree function can work effectively.

The default value is false.

ssrForceFetchDelay

Number

The time interval (in milliseconds) before Apollo Client force-fetches queries after a server-side render.

The default value is 0 (no delay).

connectToDevTools

Boolean

If true, the Apollo Client Devtools browser extension can connect to Apollo Client in your production environment. The extension can always connect in a non-production environment.

The default value is false.

queryDeduplication

Boolean

If false, Apollo Client sends every created query to the server, even if a completely identical query (identical in terms of query string, values, and Name) is already in flight.

The default value is true.

defaultOptions

Object

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.

See the example object below.

assumeImmutableResults

Boolean

If true, Apollo Client will assume results read from the cache are never mutated by application code, which enables substantial performance optimizations.

The default value is false.

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 useQuery hook uses Apollo Client's watchQuery function. To set defaultOptions when using the useQuery hook, make sure to set them under the defaultOptions.watchQuery property.

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.

Note that this method is not an implementation of GraphQL subscriptions. Rather, it uses Apollo's store in order to reactively deliver updates to your query results.

For example, suppose you call watchQuery on a GraphQL query that fetches a person's first and last name and this person has a particular object identifier, provided by dataIdFromObject. Later, a different query fetches that same person's first and last name and the first name has now changed. Then, any observers associated with the results of the first query will be updated with a new result object.

Note that if the cache does not change, the subscriber will not be notified.

See here for a description of store reactivity.

Options
Name /
Type
Description
canonizeResults
boolean
context
DefaultContext
errorPolicy
ErrorPolicy
fetchPolicy
WatchQueryFetchPolicy
initialFetchPolicy
WatchQueryFetchPolicy
nextFetchPolicy
any
notifyOnNetworkStatusChange
boolean
partialRefetch
boolean
pollInterval
number
query
DocumentNode | TypedDocumentNode
refetchWritePolicy
RefetchWritePolicy
returnPartialData
boolean
variables
TVariables

This resolves a single query according to the options specified and returns a Promise which is either resolved with the resulting data or rejected with an error.

Options
Name /
Type
Description
canonizeResults
boolean
context
DefaultContext
errorPolicy
ErrorPolicy
fetchPolicy
FetchPolicy
notifyOnNetworkStatusChange
boolean
partialRefetch
boolean
pollInterval
number
query
DocumentNode | TypedDocumentNode
returnPartialData
boolean
variables
TVariables

This resolves a single mutation according to the options specified and returns a Promise which is either resolved with the resulting data or rejected with an error.

It takes options as an object with the following keys and values:

Options
Name /
Type
Description
awaitRefetchQueries
boolean
context
TContext
errorPolicy
ErrorPolicy
fetchPolicy
MutationFetchPolicy
keepRootFields
boolean
mutation
DocumentNode | TypedDocumentNode
onQueryUpdated
OnQueryUpdated<any>
optimisticResponse
any
refetchQueries
any
update
MutationUpdaterFunction<TData, TVariables, TContext, TCache>
updateQueries
MutationQueryReducersMap<TData>
variables
TVariables

This subscribes to a graphql subscription according to the options specified and returns an Observable which either emits received data or an error.

Options
Name /
Type
Description
context
DefaultContext
errorPolicy
ErrorPolicy
fetchPolicy
FetchPolicy
query
DocumentNode | TypedDocumentNode
variables
TVariables

Tries to read some data from the store in the shape of the provided GraphQL query without making a network request. This method will start at the root query. To start at a specific id returned by dataIdFromObject use readFragment.

Arguments
Name /
Type
Description
optimistic
boolean

Tries to read some data from the store in the shape of the provided GraphQL fragment without making a network request. This method will read a GraphQL fragment from any arbitrary id that is currently cached, unlike readQuery which will only read from the root query.

You must pass in a GraphQL document with a single fragment or a document with multiple fragments that represent what you are reading. If you pass in a document with multiple fragments then you must also specify a fragmentName.

Arguments
Name /
Type
Description
optimistic
boolean
Options
Name /
Type
Description
fragment
DocumentNode | TypedDocumentNode
fragmentName
string
id
string
variables
TVariables

Writes some data in the shape of the provided GraphQL query directly to the store. This method will start at the root query. To start at a specific id returned by dataIdFromObject then use writeFragment.

Options
Name /
Type
Description
broadcast
boolean
data
TData
id
string
overwrite
boolean
query
DocumentNode | TypedDocumentNode
variables
TVariables

Writes some data in the shape of the provided GraphQL fragment directly to the store. This method will write to a GraphQL fragment from any arbitrary id that is currently cached, unlike writeQuery which will only write from the root query.

You must pass in a GraphQL document with a single fragment or a document with multiple fragments that represent what you are writing. If you pass in a document with multiple fragments then you must also specify a fragmentName.

Options
Name /
Type
Description
broadcast
boolean
data
TData
fragment
DocumentNode | TypedDocumentNode
fragmentName
string
id
string
overwrite
boolean
variables
TVariables

Resets your entire store by clearing out your cache and then re-executing all of your active queries. This makes it so that you may guarantee that there is no data left in your store from a time before you called this method.

resetStore() is useful when your user just logged out. You’ve removed the user session, and you now want to make sure that any references to data you might have fetched while the user session was active is gone.

It is important to remember that resetStore() will refetch any active queries. This means that any components that might be mounted will execute their queries again using your network interface. If you do not want to re-execute any queries then you should make sure to stop watching any active queries.

Allows callbacks to be registered that are executed when the store is reset. onResetStore returns an unsubscribe function that can be used to remove registered callbacks.

Arguments
Name /
Type
Description
cb
Promise<any>

Remove all data from the store. Unlike resetStore, clearStore will not refetch any active queries.

Allows callbacks to be registered that are executed when the store is cleared. onClearStore returns an unsubscribe function that can be used to remove registered callbacks.

Arguments
Name /
Type
Description
cb
Promise<any>

Call this method to terminate any active client processes, making it safe to dispose of this ApolloClient instance.

Refetches all of your active queries.

reFetchObservableQueries() is useful if you want to bring the client back to proper state in case of a network outage

It is important to remember that reFetchObservableQueries() will refetch any active queries. This means that any components that might be mounted will execute their queries again using your network interface. If you do not want to re-execute any queries then you should make sure to stop watching any active queries. Takes optional parameter includeStandby which will include queries in standby-mode when refetching.

Arguments
Name /
Type
Description
includeStandby
boolean

Refetches specified active queries. Similar to "reFetchObservableQueries()" but with a specific list of queries.

refetchQueries() is useful for use cases to imperatively refresh a selection of queries.

It is important to remember that refetchQueries() will refetch specified active queries. This means that any components that might be mounted will execute their queries again using your network interface. If you do not want to re-execute any queries then you should make sure to stop watching any active queries.

Options
Name /
Type
Description
include
RefetchQueriesInclude
onQueryUpdated
any
optimistic
boolean
updateCache
void

Get all currently active ObservableQuery objects, in a Map keyed by query ID strings.

An "active" query is one that has observers and a fetchPolicy other than "standby" or "cache-only".

You can include all ObservableQuery objects (including the inactive ones) by passing "all" instead of "active", or you can include just a subset of active queries by passing an array of query names or DocumentNode objects.

Arguments
Name /
Type
Description
include
RefetchQueriesInclude

Types

Properties
Name /
Type
Description
assumeImmutableResults
boolean
cache
ApolloCache<TCacheShape>
connectToDevTools
boolean
credentials
string
defaultOptions
DefaultOptions
documentTransform
DocumentTransform
fragmentMatcher
FragmentMatcher
headers
Record<string, string>
link
ApolloLink
name
string
queryDeduplication
boolean
resolvers
any
ssrForceFetchDelay
number
ssrMode
boolean
typeDefs
any
uri
string | UriFunction
version
string
Properties
Name /
Type
Description
mutate
Partial<MutationOptions>
query
Partial<QueryOptions>
react
any
watchQuery
Partial<WatchQueryOptions>
Previous
Hooks migration guide
Next
InMemoryCache
Edit on GitHubEditForumsDiscord