npm 包 graphql-request 使用教程

GraphQL 是一种用于 API 开发的查询语言，它提供了一种更有效、强大、灵活的方式来获取数据。graphql-request 是一个轻量级的 GraphQL 客户端，它可以在浏览器和 Node.js 环境下使用，不需要任何构建工具或配置。

安装 graphql-request

使用 npm 进行安装：

npm install graphql-request

发送一个简单的 GraphQL 查询

1. 导入 gql 函数和 request 方法：

import { gql, request } from 'graphql-request'

1. 创建 GraphQL 查询字符串：

const query = gql`
  query {
    users {
      id
      name
    }
  }
`

1. 使用 request 方法发送请求：

request('https://api.example.com/graphql', query).then(data => console.log(data))

在这个例子中，我们向 https://api.example.com/graphql 发送了一个查询，查询了用户的 ID 和名称。

发送带变量的查询

GraphQL 允许我们发送带有变量的查询，以便将参数传递给服务器。

1. 在查询字符串中定义变量：

const query = gql`
  query getUser($id: Int!) {
    user(id: $id) {
      id
      name
    }
  }
`

在这个例子中，我们定义了一个名为 $id 的变量，并将其作为参数传递给 user 查询。! 表示该变量为必选参数。

1. 在 request 方法中传递变量：

const variables = { id: 1 }

request('https://api.example.com/graphql', query, variables).then(data => console.log(data))

在这个例子中，我们将变量 { id: 1 } 传递给了查询。服务器可以根据这个变量返回特定的用户。

发送带有自定义 HTTP 头的请求

有时，我们需要向服务器发送一些自定义的 HTTP 头信息。graphql-request 允许我们使用第三个参数来设置这些自定义头。

const headers = {
  Authorization: 'Bearer my-token',
}

request('https://api.example.com/graphql', query, variables, headers).then(data => console.log(data))

在这个例子中，我们向服务器发送了一个包含 Authorization 头的请求。服务器可以使用这个头信息来验证请求是否有效。

结论

graphql-request 是一个简单而强大的 GraphQL 客户端，它提供了方便的 API 来发送 GraphQL 查询并处理响应。本文介绍了如何安装和使用它。GraphQL 是一个非常有前途的技术，掌握它对于前端开发人员来说是非常重要的。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/42697