GraphQL 入门教程：基本概念、查询、变换、结构-JavaScript中文网-JavaScript教程资源分享门户

GraphQL 是一种用于构建 API 的查询语言，它由 Facebook 开发并开源，旨在解决 REST API 的一些痛点。GraphQL 具有强大的灵活性和可扩展性，可以帮助前端开发人员在构建应用程序时更加高效地与后端进行交互。

基本概念

GraphQL 由三个主要部分组成：

Schema：描述了数据的结构和关系，类似于数据库中的表结构。
Query：用于从服务器获取数据的请求，类似于 REST API 中的 GET 请求。
Mutation：用于修改服务器上的数据的请求，类似于 REST API 中的 POST、PUT、DELETE 请求。

查询

查询是从服务器获取数据的主要方式。在 GraphQL 中，查询看起来像这样：

query {
  user(id: 123) {
    name
    email
  }
}

这个查询请求了一个名为 user 的对象，该对象具有 id 为 123 的属性。我们请求了 name 和 email 这两个属性。

在响应中，我们将获得一个类似于以下内容的 JSON 对象：

{
  "data": {
    "user": {
      "name": "John Doe",
      "email": "johndoe@example.com"
    }
  }
}

变换

变换用于修改服务器上的数据。在 GraphQL 中，变换看起来像这样：

mutation {
  updateUser(id: 123, name: "Jane Doe", email: "janedoe@example.com") {
    name
    email
  }
}

这个变换请求更新了一个名为 user 的对象，该对象具有 id 为 123 的属性。我们更新了 name 和 email 这两个属性。

在响应中，我们将获得一个类似于以下内容的 JSON 对象：

{
  "data": {
    "updateUser": {
      "name": "Jane Doe",
      "email": "janedoe@example.com"
    }
  }
}

结构

GraphQL 的结构非常灵活，可以根据需要进行自定义。例如，我们可以定义一个名为 User 的对象，该对象具有 name 和 email 这两个属性：

type User {
  name: String
  email: String
}

然后，我们可以创建一个查询，该查询将返回一个 User 对象：

query {
  user(id: 123) {
    name
    email
  }
}

在响应中，我们将获得一个类似于以下内容的 JSON 对象：

{
  "data": {
    "user": {
      "name": "John Doe",
      "email": "johndoe@example.com"
    }
  }
}

示例代码

以下是一个使用 GraphQL 查询 GitHub API 的示例代码：

// javascriptcn.com 代码示例
const fetch = require('node-fetch');

const query = `
  query {
    repository(owner: "facebook", name: "react") {
      name
      description
      stargazers {
        totalCount
      }
      watchers {
        totalCount
      }
    }
  }
`;

fetch('https://api.github.com/graphql', {
  method: 'POST',
  headers: {
    Authorization: `Bearer ${process.env.GITHUB_TOKEN}`,
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({ query }),
})
  .then((res) => res.json())
  .then((data) => console.log(data));

这个查询请求了一个名为 repository 的对象，该对象具有 owner 为 facebook 和 name 为 react 的属性。我们请求了 name、description、stargazers 和 watchers 这四个属性。

在响应中，我们将获得一个类似于以下内容的 JSON 对象：

// javascriptcn.com 代码示例
{
  "data": {
    "repository": {
      "name": "react",
      "description": "A declarative, efficient, and flexible JavaScript library for building user interfaces.",
      "stargazers": {
        "totalCount": 167000
      },
      "watchers": {
        "totalCount": 11000
      }
    }
  }
}

总结

GraphQL 是一个非常强大和灵活的查询语言，可以帮助前端开发人员更加高效地与后端进行交互。本文介绍了 GraphQL 的基本概念、查询、变换和结构，并提供了一个使用 GraphQL 查询 GitHub API 的示例代码。希望这篇文章能够帮助你入门 GraphQL。

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