Basic HTTP networking

Apollo Client has built-in support for communicating with a GraphQL server over HTTP. To set up this communication, provide the server's URL as the uri parameter to the ApolloClient constructor:

1
import { ApolloClient, InMemoryCache } from '@apollo/client';
2

3
const client = new ApolloClient({
4
  uri: 'https://api.example.com',
5
  cache: new InMemoryCache()
6
});

If you provide this parameter, Apollo Client sends all GraphQL operations (queries and mutations) to the specified URL over HTTP.

Including credentials in requests

Apollo Client can include user credentials (basic auth, cookies, etc.) in the HTTP requests it makes to a GraphQL server. By default, credentials are included only if the server is hosted at the same origin as the application using Apollo Client. You can adjust this behavior by providing a value for the credentials parameter to the ApolloClient constructor:

1
import { ApolloClient, InMemoryCache } from '@apollo/client';
2

3
const client = new ApolloClient({
4
  uri: 'https://api.example.com',
5
  cache: new InMemoryCache(),
6
  // Enable sending cookies over cross-origin requests
7
  credentials: 'include'
8
});

The following values for credentials are supported:

For more information, see Request.credentials.

Customizing request headers

You can specify the names and values of custom headers to include in every HTTP request to a GraphQL server. To do so, provide the headers parameter to the ApolloClient constructor, like so:

1
import { ApolloClient, InMemoryCache } from '@apollo/client';
2

3
const client = new ApolloClient({
4
  uri: 'https://api.example.com',
5
  cache: new InMemoryCache(),
6
  headers: {
7
    authorization: localStorage.getItem('token'),
8
    'client-name': 'WidgetX Ecom [web]',
9
    'client-version': '1.0.0'
10
  }
11
});