Skip to content

Latest commit

 

History

History
109 lines (87 loc) · 5.41 KB

ApolloClient.mdx

File metadata and controls

109 lines (87 loc) · 5.41 KB
Raw
title description order
ApolloClient
ApolloClient API reference
11

import { TypescriptApiBox } from 'gatsby-theme-apollo-docs';

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

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, InMemoryCache, createHttpLink } from '@apollo/client';

// Instantiate required constructor fields
const cache = new InMemoryCache();
const link = createHttpLink({
  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
uri A URI pointing to the backend GraphQL endpoint that Apollo Client will communicate with. Note: One of uri or link is required; if both are specified, link will take precedence. You may also specify credentials and headers along with uri.
link You can provide an Apollo Link instance to serve as Apollo Client's network layer. For more information, see the advanced HTTP networking section. Note: One of uri or link is required; if both are specified, link will take precedence.
cache Apollo Client uses an Apollo Cache instance to handle its caching strategy. The recommended cache is InMemoryCache which is provided by the @apollo/client package. For more information, see Configuring the cache.

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.

Note that this version string 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 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 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.

ApolloClient functions

Types