将 REST API 转换为 GraphQL API

我非常喜欢使用 GraphQL API。我喜欢能够以我想要的方式获取数据，并使用订阅功能实时获取数据。这个周末我发现，将 REST API 转换为 GraphQL API 比想象中要容易得多。

本文将逐步讲解如何将一个 REST 端点转换为 GraphQL。学会一个之后，你就能轻松完成更多了 😀

我们将转换的 REST API 端点

为了简单起见，我们将使用一个简单的 GET REST 端点作为起点：

GET https://pokeapi.co/api/v2/pokemon/pikachu/

现在我们来创建一个 GraphQL 端点。

定义宝可梦对象的 GraphQL 模式

首先，我们定义用于存储从新的 API 端点返回的宝可梦数据的 GraphQL 类型：

type Pokemon {
  id:       String!
  name:     String!
  base_experience:  Int!
}

为了便于举例，我们只列出了部分字段，但如果您需要，可以添加更多字段。

定义 GraphQL 查询类型

然后我们定义一个名为 `GraphQL` 的查询，getPokemon该查询接受一个 `a`参数id并返回一个 `a`Pokemon对象：

type Query {
  getPokemon(id: String!): Pokemon
}

定义查询解析器

当getPokemon收到 GraphQL 查询时，在我们的解析器内部，我们会向以下地址发送 GET 请求/pokemon/<id>/：

const resolvers = {
  Query: {
      getPokemon: async (_, { id }) => {

          const response = await fetch(MY_REST_URL + '/pokemon/' + id + '/');
          return response.json();
      },
  }

在 GraphQL Playground 中尝试查询

上述代码的副本可在 Glitch 上编辑，并可通过 GraphQL Playground 在线运行，支持交互式查询。

请前往 GraphQL Playground 并尝试我们刚刚创建的查询：

query {
  getPokemon(id: "pikachu"){
    id
    base_experience
  }
}

它会返回来自 PokeAPI 的真实数据：

{
  "data": {
    "getPokemon": {
      "id": "25",
      "base_experience": 112
    }
  }
}

太棒了！作为练习，尝试添加除以下字段之外的另一个字段base_experience：

1. Remix 我的 Glitch 应用
2. 将该字段添加到Pokemon架构中
3. 将其添加到您的查询中，并在 GraphQL Playground 中查看结果。

掌握了这些知识，再加上一点练习，你就能做很多事情。尽情享受吧！