从 REST API 转向 GraphQL API
REST API 已经成为 Web 开发的一个基础组件。然而,一些开发者认为 REST API 的构建和使用可能存在一些问题。GraphQL API 的出现解决了这些问题并成为一种替代方案。
GraphQL API 是一种更加灵活的数据查询和传输方案,它不仅仅简化了前端和后端之间的沟通,而且还提供了更多的控制能力。
本文将从以下几个方面来讨论如何从 REST API 转向 GraphQL API。
1.了解 GraphQL API
GraphQL API 是由 Facebook 开发的一种数据查询语言。它提供了前端开发人员一个强大的工具来查询和操作服务端的数据,而不需要传统 REST API 强制指定预先定义的资源或操作。
GraphQL 的核心概念是“查询”。应用程序在 GraphQL 上执行的任何操作都是查询。这些查询由一个查询字符串组成,可以在服务端发送到一系列 GraphQL Resolver 函数中执行,以生成结果。
GraphQL 的另一个重要特点是它支持服务端返回的数据按需请求,这意味着只会返回客户端请求的数据而不会返回其他不必要的数据,这能大大降低网络负载和提高应用程序的整体性能。
2.为什么选择 GraphQL API
REST API 是传统的 Web API 架构,但它还存在一些问题。其中一个主要问题是数据延迟和网络传输的问题。REST API 通常是固定的,它只能返回一个固定集合的信息,这就导致了一些不必要的数据传输。
GraphQL API 可以通过有效的数据查询和传输方案来提高服务端和客户端之间的沟通效率。客户端可以仅请求需要的数据而非整个 REST 资源,这意味着网络传输的数据量减少,服务端响应时间快了。
GraphQL 还有一个重要的优势:它没有声明式资源概念。相反,它允许查询任何数据,这使得它非常灵活,因为可以按照需要进行查询。
3.开始使用 GraphQL API
现在已经了解了 GraphQL API 的优势和原理,我们可以开始使用 GraphQL API 为我们的应用程序构建数据层。
首先,为了使用 GraphQL API,我们需要一个 GraphQL 服务器和一个 GraphQL 客户端。
我们使用 Apollo Client 作为操作 GraphQL API 的工具。
在服务器端,我们选择使用 Apollo Server,一个 GraphQL 服务器的标准实现。要将 Apollo Server 配置为我们的数据API,我们只需要编写以下代码段:
-- -------------------- ---- ------- ----- - ------------- --- - - ------------------------ ----- -------- - ---- ---- ----- - ------ ------ - -- ----- --------- - - ------ - ------ -- -- - ------ ------ -------- -- -- -- ----- ------ - --- -------------- --------- --------- --- ----------------------- --- -- -- - --------------- ------ ----- -- --------- ---
其中,typeDefs
定义了我们的数据模型,resolvers
定义了响应查询的函数。 hello
查询返回字符串“ Hello World”。
现在我们已经准备好使用 Apollo Client 创建一个图形化的 GraphQL 查询。
import React from 'react'; import ReactDOM from 'react-dom'; import {ApolloClient, gql, ApolloProvider, useQuery } from '@apollo/client'; const client = new ApolloClient({ uri: 'http://localhost:4000/', });
以上代码容易理解,首先这里的 ApolloClient 是用来连接前面搭建好的 Apollo Server 服务器的,可以看到 client 的 uri 指向的就是前面我们搭建好的 server。
现在就可以使用useQuery
hook 执行查询了。例如,下面的代码获取 GraphQL API 返回的“ hello world”字符串:
-- -------------------- ---- ------- ----- ----- - -- -- - ----- --------- ------ ----- - ------------- ----- - ----- - --- -- --------- ------ ---------- -------- -- ------- ------ ----------- ----- - -------------------- ------ -------------------- - ---------------- --------------- ---------------- ------ -- ------------------ -------------------------------- --
4.结论
GraphQL API 相较于传统的 REST API 构建和使用更加灵活,它可以有效提高服务端和客户端间的沟通效率。在构建数据层时选择 GraphQL API 是一种明智的决定。
本文介绍了 GraphQL API 的主要原理和优势,还展示了使用 Apollo Client 和 Apollo Server 在前端和后端之间使用 GraphQL API 的基本示例。对于希望从 REST API 转向 GraphQL API 的开发人员来说,该文可以作为参考以及指导意义。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/676f9eb6e9a7045d0d74de58