使用 GraphQL Schemas 构建 API-JavaScript中文网-JavaScript教程资源分享门户

GraphQL 是一种用于 API 的查询语言和运行时环境。它提供了一种更高效、强大和灵活的方式来构建 API。在 GraphQL 中，客户端可以精确地指定它需要的数据，并且可以从多个资源中获取数据，从而减少了网络传输的数据量。这使得 GraphQL 成为构建前端应用程序所需的理想工具。

GraphQL Schemas 是 GraphQL 的核心组件之一。它定义了 API 的数据类型、查询和变异语句以及数据源。在本文中，我们将介绍如何使用 GraphQL Schemas 构建 API，并向读者提供一些示例代码和指导意义。

定义 GraphQL Schemas

GraphQL Schemas 定义了 API 的数据类型、查询和变异语句以及数据源。GraphQL Schemas 由类型定义和解析器组成。类型定义定义了数据的类型和关系，而解析器则定义了如何从数据源中获取数据。以下是一个基本的 GraphQL Schema 定义：

// javascriptcn.com 代码示例
type Query {
  hello: String
}

type Mutation {
  updateName(name: String!): String
}

schema {
  query: Query
  mutation: Mutation
}

在上面的示例中，我们定义了 Query 和 Mutation 类型。Query 类型包含一个 hello 字段，它返回一个字符串。Mutation 类型包含一个 updateName 字段，它接受一个名为 name 的字符串参数，并返回一个字符串。最后，我们定义了一个 schema，它指定了我们的查询和变异类型。

编写解析器

一旦我们定义了我们的 GraphQL Schema，我们需要编写解析器来实现我们的查询和变异。解析器是一个函数，它接受一个查询或变异并返回一个结果。以下是一个基本的解析器示例：

// javascriptcn.com 代码示例
const resolvers = {
  Query: {
    hello: () => 'Hello world!',
  },
  Mutation: {
    updateName: (parent, { name }) => {
      // Update name in database
      return `Name updated to ${name}`;
    },
  },
};

在上面的示例中，我们定义了一个 resolvers 对象，该对象包含了我们的 Query 和 Mutation 类型的解析器。hello 解析器返回一个字符串，而 updateName 解析器接受一个名为 name 的参数，并将其更新到数据库中。最后，我们返回一个字符串，指示名称已更新。

现在我们已经定义了我们的 GraphQL Schema，并编写了解析器，我们可以使用它来构建我们的 API。以下是一个基本的使用 GraphQL Schemas 构建 API 的示例：

// javascriptcn.com 代码示例
const { ApolloServer } = require('apollo-server');
const typeDefs = require('./schema');
const resolvers = require('./resolvers');

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

server.listen().then(({ url }) => {
  console.log(`Server ready at ${url}`);
});

在上面的示例中，我们使用 ApolloServer 类创建了一个 GraphQL 服务器。我们将我们的 GraphQL Schema 和解析器传递给服务器，并启动服务器。现在我们可以在浏览器中访问我们的 API，并查询和变异数据。

总结

在本文中，我们介绍了如何使用 GraphQL Schemas 构建 API。我们定义了 GraphQL Schema 和解析器，并使用它们来创建我们的 API。我们还提供了一些示例代码和指导意义，以帮助读者更好地理解 GraphQL Schemas 的工作原理。如果您正在构建前端应用程序，那么 GraphQL Schemas 是一种理想的工具，它可以帮助您构建高效、强大和灵活的 API。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/657b3be7d2f5e1655d5c56a4