Basic HTTP networking
Communicate with a GraphQL server over HTTP
Apollo Client has built-in support for communicating with a GraphQL server over HTTP with HttpLink.
To set up this communication, provide an HttpLink instance as the link option to the ApolloClient constructor:
1import { ApolloClient, InMemoryCache, HttpLink } from "@apollo/client";
2
3const client = new ApolloClient({
4 cache: new InMemoryCache(),
5 link: new HttpLink({
6 uri: "https://api.example.com",
7 }),
8});If you provide this parameter, Apollo Client sends all GraphQL operations (queries and mutations) to the specified URL over HTTP.
Including credentials in requests
HttpLink 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 option to the HttpLink constructor:
1import { ApolloClient, InMemoryCache, HttpLink } from "@apollo/client";
2
3const client = new ApolloClient({
4 cache: new InMemoryCache(),
5 link: new HttpLink({
6 uri: "https://api.example.com",
7 // Enable sending cookies over cross-origin requests
8 credentials: "include",
9 }),
10});The following values for credentials are supported:
| Option | Description |
|---|---|
same-origin | Send 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. |
omit | Never send or receive credentials. |
include | Always 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 option to the HttpLink constructor, like so:
1import { ApolloClient, InMemoryCache, HttpLink } from "@apollo/client";
2
3const client = new ApolloClient({
4 cache: new InMemoryCache(),
5 link: new HttpLink({
6 uri: "https://api.example.com",
7 headers: {
8 authorization: localStorage.getItem("token"),
9 "client-name": "WidgetX Ecom [web]",
10 "client-version": "1.0.0",
11 },
12 }),
13});API
Options provided to the HttpLink constructor.
string | BaseHttpLink.UriFunctionThe URL of the GraphQL endpoint to send requests to. Can also be a
function that accepts an ApolloLink.Operation object and returns the
string URL to use for that operation.
RequestCredentialsThe credentials policy to use for each fetch call.
Record<string, string>An object representing headers to include in every HTTP request.
1 {
2 "Authorization": "Bearer 1234"
3 }ClientAwarenessLink.ClientAwarenessOptionsConfigures the "client awareness" feature. This feature allows you to identify distinct applications in Apollo Studio and Apollo Server logs (and other monitoring or analytics tools) by adding information about the your application to outgoing requests.
ClientAwarenessLink.EnhancedClientAwarenessOptionsConfigures the "enhanced client awareness" feature. This feature allows you to identify the version of the Apollo Client library used in your application in Apollo Studio (and other monitoring or analytics tools) by adding information about the Apollo Client library to outgoing requests.
typeof fetchA function to use instead of calling the Fetch API directly
when sending HTTP requests to your GraphQL endpoint. The function must
conform to the signature of fetch.
By default, the Fetch API is used unless it isn't available in your runtime environment.
See Customizing fetch.
RequestInitAny overrides of the fetch options argument to pass to the fetch call.
An object containing options to use for each call to fetch. If a
particular option is not included in this object, the default value of
that option is used.
booleanIf true, includes the extensions field in operations sent to your
GraphQL endpoint.
If true, unused variables from the operation will not be stripped from
the request and will instead be sent to the GraphQL endpoint.
Read more...
Unused variables are likely to trigger server-side validation errors,
per https://spec.graphql.org/draft/#sec-All-Variables-Used.
includeUnusedVariables can be useful if your server deviates
from the GraphQL specification by not strictly enforcing that rule.
booleanIf true, header names won't be automatically normalized to lowercase.
This allows for non-http-spec-compliant servers that might expect
capitalized header names.
BaseHttpLink.PrinterA function to use when transforming a GraphQL document into a string. It
accepts an ASTNode (typically a DocumentNode) and the original print
function as arguments, and is expected to return a string. This option
enables you to, for example, use stripIgnoredCharacters to remove
whitespace from queries.
By default the GraphQL print function is used.
1 import { stripIgnoredCharacters } from "graphql";
2
3 const httpLink = new HttpLink({
4 uri: "/graphql",
5 print: (ast, originalPrint) => stripIgnoredCharacters(originalPrint(ast)),
6 });booleanIf true, the link uses an HTTP GET request when sending query
operations to your GraphQL endpoint. Mutation operations continue to use
POST requests. If you want all operations to use GET requests,
set fetchOptions.method instead.
Options passed to HttpLink through request context. Previous
non-terminating links in the link chain also can set these values to
customize the behavior of HttpLink for each operation.
HttpLink constructor.
If a value is provided to both, the value in context takes precedence.ClientAwarenessLink.ClientAwarenessOptionsConfigures the "client awareness" feature. This feature allows you to identify distinct applications in Apollo Studio and Apollo Server logs (and other monitoring or analytics tools) by adding information about the your application to outgoing requests.
RequestCredentialsThe credentials policy to use for each fetch call.
RequestInitAny overrides of the fetch options argument to pass to the fetch call.
An object containing options to use for each call to fetch. If a
particular option is not included in this object, the default value of
that option is used.
Record<string, string>An object representing headers to include in every HTTP request.
1 {
2 "Authorization": "Bearer 1234"
3 }BaseHttpLink.HttpOptionsAn object that configures advanced functionality, such as support for persisted queries.
string | BaseHttpLink.UriFunctionThe URL of the GraphQL endpoint to send requests to. Can also be a
function that accepts an ApolloLink.Operation object and returns the
string URL to use for that operation.