Join us from October 8-10 in New York City to learn the latest tips, trends, and news about GraphQL Federation and API platform engineering.Join us for GraphQL Summit 2024 in NYC
Docs
Start for Free

Basic HTTP networking

Communicate with a GraphQL server over HTTP


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

import { ApolloClient, InMemoryCache } from '@apollo/client';
const client = new ApolloClient({
uri: 'https://api.example.com',
cache: new InMemoryCache()
});

If you provide this parameter, Apollo Client sends all (queries and ) 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:

import { ApolloClient, InMemoryCache } from '@apollo/client';
const client = new ApolloClient({
uri: 'https://api.example.com',
cache: new InMemoryCache(),
// Enable sending cookies over cross-origin requests
credentials: 'include'
});

The following values for credentials are supported:

OptionDescription
same-originSend user credentials (cookies, basic http auth, etc.) if the server's URL is on the same origin as the requesting client. This is the default value.
omitNever send or receive credentials.
includeAlways send user credentials (cookies, basic http auth, etc.), even for cross-origin requests.

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:

import { ApolloClient, InMemoryCache } from '@apollo/client';
const client = new ApolloClient({
uri: 'https://api.example.com',
cache: new InMemoryCache(),
headers: {
authorization: localStorage.getItem('token'),
'client-name': 'WidgetX Ecom [web]',
'client-version': '1.0.0'
}
});
Previous
Loading queries with Webpack
Next
Advanced HTTP networking
Rate articleRateEdit on GitHubEditForumsDiscord

© 2024 Apollo Graph Inc., d/b/a Apollo GraphQL.

Privacy Policy

Company