在 JavaScript 中使用 GraphQL – 项目初步介绍-JavaScript中文网-JavaScript教程资源分享门户

GraphQL 是一种用于 API 的查询语言，它是一种类似于 SQL 的语言，但是比 SQL 更灵活。GraphQL 的核心思想是让客户端能够精确地指定其需要的数据，而不是像 RESTful API 那样，需要从服务器获取整个数据集合。

在本文中，我们将介绍如何在 JavaScript 中使用 GraphQL，包括如何设置 GraphQL 服务器和如何使用它来查询数据。我们还将介绍一些 GraphQL 的基本概念和术语，以帮助您更好地理解这项技术。

什么是 GraphQL？

GraphQL 是一个用于 API 的查询语言，它由 Facebook 开发。与 RESTful API 不同，GraphQL 允许客户端指定其需要的数据，从而避免了不必要的数据传输。GraphQL 还提供了一种类型系统，使得客户端可以准确地了解 API 中可用的数据和如何查询这些数据。

GraphQL 的基本概念

Schema

GraphQL 的 Schema 定义了 API 可用的类型和查询。它类似于数据库中的模式，定义了可用的字段和返回值类型。

以下是一个简单的 GraphQL Schema 示例：

type Query {
  hello: String
}

这个 Schema 定义了一个名为 "hello" 的查询，它返回一个字符串。

Resolver

Resolver 是一个函数，它将客户端的查询映射到 API 中的数据。Resolver 接收客户端查询中的参数，并返回 API 中的数据。

以下是一个简单的 Resolver 示例：

const resolvers = {
  Query: {
    hello: () => "Hello World!"
  }
};

这个 Resolver 将客户端的 "hello" 查询映射到字符串 "Hello World!"。

Query

Query 是客户端发送到 API 的数据查询。它指定了客户端需要的数据和如何查询这些数据。

以下是一个简单的 Query 示例：

{
  hello
}

这个 Query 查询了一个名为 "hello" 的字段。

如何使用 GraphQL？

要使用 GraphQL，在 JavaScript 中，您需要安装一个 GraphQL 服务器和一个 GraphQL 客户端。以下是一些流行的 GraphQL 服务器和客户端：

GraphQL 服务器

Apollo Server
Express GraphQL
Graphcool
Prisma

GraphQL 客户端

Apollo Client
Relay
Lokka
Urql

在本文中，我们将使用 Apollo Server 和 Apollo Client 来演示如何使用 GraphQL。

设置 GraphQL 服务器

首先，我们需要设置一个 GraphQL 服务器。我们将使用 Apollo Server 来设置服务器。以下是设置 Apollo Server 的步骤：

安装依赖：

npm install apollo-server graphql

创建一个 GraphQL Schema：

// javascriptcn.com 代码示例
const { gql } = require("apollo-server");

const typeDefs = gql`
  type Query {
    hello: String
  }
`;

module.exports = typeDefs;

创建一个 Resolver：

const resolvers = {
  Query: {
    hello: () => "Hello World!"
  }
};

module.exports = resolvers;

创建一个 Apollo Server：

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

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

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

现在，您已经成功设置了一个 GraphQL 服务器，它将响应客户端的查询并返回结果。要测试服务器，请在浏览器中打开 http://localhost:4000/，您将看到一个 GraphQL Playground，您可以在其中测试服务器。

使用 Apollo Client 查询数据

现在，我们已经设置了一个 GraphQL 服务器，我们可以使用 Apollo Client 来查询数据。以下是使用 Apollo Client 的步骤：

安装依赖：

npm install apollo-boost graphql

创建一个 Apollo Client：

import ApolloClient from "apollo-boost";

const client = new ApolloClient({
  uri: "http://localhost:4000/"
});

创建一个查询：

import gql from "graphql-tag";

const GET_HELLO = gql`
  {
    hello
  }
`;

发送查询：

client.query({
  query: GET_HELLO
}).then(result => {
  console.log(result.data.hello);
});

现在，您已经成功使用 Apollo Client 查询了服务器，并获得了查询结果。

总结

本文介绍了如何在 JavaScript 中使用 GraphQL。我们讨论了 GraphQL 的基本概念和术语，并演示了如何设置 GraphQL 服务器和如何使用 Apollo Client 查询数据。我们希望这篇文章能够帮助您了解 GraphQL，并开始使用它来构建更好的 API。

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