基本的HTTP联网

通过HTTP与GraphQL服务器通信

Apollo客户端已经内置了对通过HTTP与GraphQL服务器通信的支持。要设置此通信，请将服务器URL作为uri参数传递给ApolloClient构造函数：

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

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

如果你提供此参数，Apollo
客户端将向指定的URL发送所有GraphQL操作（查询和突变）。

请求中包含凭证

Apollo客户端可以将用户凭证（基本身份验证、cookies等）包含在它向GraphQL服务器发出的HTTP请求中。默认情况下，只有当服务器位于与使用Apollo客户端的应用相同的源处时，才会包含凭证。您可以通过在构造函数中为credentials参数提供一个值来调整此行为：

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
});

以下为credentials支持的值：

选项	描述
`same-origin`	如果服务器URL与请求客户端同源，则发送用户凭据（ cookies、基本HTTP身份验证等）。这是默认值。
`omit`	从不发送或接收凭据。
`include`	始终发送用户凭据（ cookies、基本HTTP身份验证等），即使是跨源请求。

更多信息，请参阅Request.credentials。

自定义请求头

您可以为发送到 GraphQL 服务器的每个 HTTP 请求指定自定义头的名称和值。要这样做，请将headers参数提供给ApolloClient构造函数，如下所示：

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
});

使用 Webpack 加载查询

高级HTTP网络