使用 Fetch 发起 GraphQL 请求

发布在 Blog/zh10/21/2023, last edited on 1/1/1970.

您可以使用 JavaScript 的内置 fetch API 以简单的方式查询 GraphQL API,无需任何库或依赖项 。

Fetch API

您可以使用 JavaScript 的内置 fetch API 以简单的方式查询 GraphQL API,无需任何库或依赖项 .

首先,我们应该将 GraphQL API URL 放入 fetch() POST 方法中。

例如,GitHub 的 GraphQL API URL 是 https://api.github.com/graphql,因此我们可以得到:

fetch("https://api.github.com/graphql", {
  method: "POST",
})

请求 Headers

然后,我们应该设置请求标头。 GraphQL 要求请求的 Content-Type 应为 application/json

一些 API(如 GitHub)也需要携带令牌来请求。

fetch('https://github.com/graphql', {
  method: 'POST',

  headers: {
    "Content-Type": "application/json",
    "Authorization": "Bearer <Token>",
  },
})

请求 Body

与 REST API 不同的事情之一是 GraphQL 可以让开发人员决定应该响应什么样的数据。

正文应该是 JSON 格式,并且有一个名为 query 的键,其中包含查询参数,我们使用 JSON.stringify()object 转换为 string,以便在 fetch() 中发出请求。

fetch('https://github.com/graphql', {
  method: 'POST',

  headers: {
    "Content-Type": "application/json",
    "Authorization": "Bearer <Token>",
  },

  body: JSON.stringify({
    // GraphQL, this query decides to get the first 6 discussions in the repo, responds with their title and URL.
    query: `
    query {
        repository(owner: "ocoke", name: "Biscus") {
          discussions(first: 6) {
            nodes {
              title
              url
            }
          }
        }
      }`,
  }),
}).then(res => res.json()).then(res => res.data)

好,现在我们已经通过 fetch() 从 GraphQL API 获取数据。