GraphQLGraphQL 客户端
由于 GraphQL API 比 REST API 具有更多底层结构，因此存在更强大的客户端，例如 Relay，它可以自动处理批处理、缓存和其他功能。但您不需要复杂的客户端来调用 GraphQL 服务器。使用 graphql-http，您只需向您安装 GraphQL 服务器的端点发送 HTTP POST 请求，并将 GraphQL 查询作为 JSON 负载中的 query 字段传递。
例如，假设我们在 http://localhost:4000/graphql 上安装了 GraphQL 服务器，如 运行 Express GraphQL 服务器 的示例代码所示，并且我们想要发送 GraphQL 查询 { hello }。我们可以使用 curl 从命令行执行此操作。如果您将此粘贴到终端中
curl -X POST \-H "Content-Type: application/json" \-d '{"query": "{ hello }"}' \http://localhost:4000/graphql
您应该会看到以 JSON 格式返回的输出
{"data":{"hello":"Hello world!"}}
如果您更喜欢使用图形用户界面来发送测试查询，您可以使用 GraphiQL、Insomnia 和 Postman 等客户端。
从浏览器发送 GraphQL 也非常简单。打开 http://localhost:4000/graphql，打开开发者控制台，然后粘贴
fetch("/graphql", { method: "POST", headers: { "Content-Type": "application/json", Accept: "application/json", }, body: JSON.stringify({ query: "{ hello }" }),}) .then(r => r.json()) .then(data => console.log("data returned:", data))
您应该会看到返回的数据，并在控制台中记录
data returned: Object { hello: "Hello world!" }
在这个例子中，查询只是一个硬编码的字符串。随着应用程序变得更加复杂，并且您添加了如 传递参数 中所述接受参数的 GraphQL 端点，您将希望使用客户端代码中的变量来构建 GraphQL 查询。您可以通过在查询中包含一个以美元符号为前缀的关键字，并在有效负载上传递一个额外的 variables 字段来实现这一点。
例如，假设您正在运行来自 传递参数 的示例服务器，该服务器具有以下模式：
type Query { rollDice(numDice: Int!, numSides: Int): [Int]}
您可以使用以下代码从 JavaScript 中访问它：
var dice = 3var sides = 6var query = `query RollDice($dice: Int!, $sides: Int) { rollDice(numDice: $dice, numSides: $sides)}`
fetch("/graphql", { method: "POST", headers: { "Content-Type": "application/json", Accept: "application/json", }, body: JSON.stringify({ query, variables: { dice, sides }, }),}) .then(r => r.json()) .then(data => console.log("data returned:", data))
使用这种变量语法是一个好主意，因为它可以自动防止由于转义造成的错误，并且可以更轻松地监控您的服务器。
通常，设置像 Relay 这样的 GraphQL 客户端需要更多时间，但随着应用程序的增长，它值得付出努力。您可能想先使用 HTTP 请求作为底层传输层，然后随着应用程序变得更加复杂，再切换到更复杂的客户端。
此时，您可以为接收单个字符串的 API 编写 GraphQL 客户端和服务器。要执行更多操作，您需要 学习如何使用其他基本数据类型。