简单易懂的 GraphQL 教程-FunTeaLearn Online Web Tutorials

GraphQL 是一种用于 API 的查询语言和运行时环境，旨在提高应用程序的效率和灵活性。它允许客户端指定需要的数据，并仅返回所需的数据，使得数据的传输和处理更加高效和快速。

GraphQL 基本概念

Schema

Schema 定义了所有支持的类型、查询和变量等。它描述了客户端可以查询的 API，定义了查询的返回类型以及数据的结构。

Resolver

Resolver 是 GraphQL 查询实现的关键。Resolver 用于从数据源中获取请求数据。对于每个请求字段，Resolver 会被调用来获取相应的数据。可以认为 Resolver 是 GraphQL 和数据源之间的“接口”。

Query

Query 用于从 GraphQL API 请求数据。它是以特定的格式结构化的对象，用于请求数据。

Mutation

Mutation 用于在 GraphQL API 上修改数据。它是在 GraphQL 中定义的一种操作，允许客户端传递数据并修改数据源。

Subscription

Subscription 允许您向 GraphQL API 订阅实时数据更新。客户端可以订阅服务器上的事件，并接收与该事件相关的数据。

GraphQL 优势

相比传统 RESTful API，GraphQL 可以减少网络请求次数。GraphQL API 可以单次返回多条数据，而不必发送多个请求。
GraphQL 允许针对不同用例（例如移动设备和桌面应用程序）发出自定义请求。
GraphQL 提供了对运行时架构的深入了解，并可与复杂的现有数据源集成。
GraphQL 具有强类型系统，可以提供安全、一致且可预测的 API，使得 API 开发更简单。

GraphQL 示例

下面是一个使用 GraphQL 建立查询和修改数据的简单示例：

定义数据源

首先，我们定义一个简单的数据源（例如，一个 todo 列表），并在服务器上暴露它：

// www.javascriptcn.com code example
const todos = [
  { id: 1, content: 'Finish work', completed: false },
  { id: 2, content: 'Go to gym', completed: false },
  { id: 3, content: 'Buy groceries', completed: true },
];

const resolvers = {
  Query: {
    todos: () => todos,
  },
  Mutation: {
    toggleTodo: (_, { id }) => {
      const todo = todos.find((t) => t.id === id);
      todo.completed = !todo.completed;
      return todo;
    },
    addTodo: (_, { content }) => {
      const id = todos.length + 1;
      const todo = { id, content, completed: false };
      todos.push(todo);
      return todo;
    },
  },
};

我们在此定义了一个简单的数据源 todos，并在 resolvers 中定义了两个 Mutation（toggleTodo 和 addTodo）和一个 Query（todos），Query 用于查询数据，Mutation 用于修改数据。

定义 Schema

我们需要定义一个 Schema，以便客户端执行查询和变异操作。对于此示例，我们的 Schema 如下所示：

// www.javascriptcn.com code example
const typeDefs = `
  type Todo {
    id: ID!
    content: String!
    completed: Boolean!
  }
  type Query {
    todos: [Todo]!
  }
  type Mutation {
    toggleTodo(id: ID!): Todo!
    addTodo(content: String!): Todo!
  }
`;

上面的 Schema 定义了 Todo 类型、查询类型（Query）和变异类型（Mutation），并定义了每个类型的字段及其返回类型。

搭建服务器

我们需要搭建一个服务器来处理 GraphQL 请求。我们可以使用 Express 建立一个简单的服务器。

// www.javascriptcn.com code example
const express = require('express');
const { ApolloServer } = require('apollo-server-express');

const app = express();

const server = new ApolloServer({ typeDefs, resolvers });

server.applyMiddleware({ app });

app.listen({ port: 4000 }, () =>
  console.log(`🚀 Server ready at http://localhost:4000${server.graphqlPath}`)
);

上面的代码创建了一个 Express 应用程序，并将 ApolloServer 添加到该应用程序中。最后，监听端口并启动服务器。

测试 GraphQL API

现在我们可以使用任何 GraphQL 客户端来测试我们的 API。例如，我们可以使用 GraphiQL 作为测试工具（GraphiQL 是一个 web 界面，可以帮助您在浏览器中探索 GraphQL API）。

在浏览器中，访问 http://localhost:4000/graphql 路径，即可打开 GraphiQL 界面。在左侧文本框中输入以下命令：

mutation {
  addTodo (content: "Learn GraphQL") {
    id
    content
    completed
  }
}

按下执行按钮，就会在右侧窗口中返回生成的数据：

// www.javascriptcn.com code example
{
  "data": {
    "addTodo": {
      "id": "4",
      "content": "Learn GraphQL",
      "completed": false
    }
  }
}

我们已经成功添加了一条 todo！这只是 GraphQL 的一个非常简单的示例，但它说明了如何使用 GraphQL 构建一个 API。

Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/67d77dc0a941bf7134d6ce1d

简单易懂的 GraphQL 教程