前言
GraphQL 是一种用于 API 开发的查询语言和运行时。与传统的 RESTful API 相比,GraphQL 具有更为灵活的查询方式,可以让前端开发者根据自身需要从 API 中获取最小化、精确化的数据,减少了不必要的数据传输和浪费。
然而,一般情况下,我们所需要访问的 API 都是已经存在的 RESTful API,这时候,我们是否可以利用 GraphQL 查询语言来快速访问和转化这些 API 呢?
本文将详细介绍如何在 GraphQL 中使用现有的 REST API 进行数据获取,并附上对应的代码示例和学习指导。
什么是 REST API?
REST(Representational State Transfer,表示性状态转移)是一种软件架构风格,它在网络上实现了允许客户端发出请求并获取一个由服务器返回的 Web 资源的方法。这些资源通过一个全局唯一的标识符 URI 来表示。
在 RESTful API 中,资源表示为交换响应的 HTTP 资源,且每个资源都可以附带与其相关的资源中的任何信息。这意味着它使用 GET,PUT,POST 和 DELETE 方法来访问和更新这些资源。
如何使用 REST API 的数据进行 GraphQL 查询?
通常,在使用 GraphQL 查询时,我们需要先定义一个 GraphQL Schema,定义需要查询的字段和它们的相关数据类型。但在使用 REST API 的情况下,我们需要将 REST API 的 URL 作为 GraphQL 中的字段名,即为它们定义自定义的类型和自定义的字段 arguments。
以获取一个返回 JSON 数据的 REST API 为例,我们可以将其 URL 构建为一个可查询的 GraphQL 字段,例如:
type Query { getUsers: [User] }
其中 getUsers
是我们自定义的字段名,用于查询用户数据;User
是自定义的类型,表示返回的数据结构。接着我们需要在 User
类型中定义其结构,即返回 JSON 数据中的字段。
type User { id: ID! username: String email: String }
在这个例子中,我们预期服务器将返回一个 JSON 对象,该对象具有键值对 id
,username
和 email
,其中 id
是一个字符串类型,username
和 email
是字符串类型。我们将不会包含其他键值对。
然后,我们需要编写一个 resolver 函数,使其能够查询并返回 REST API 的数据,例如:
-- -------------------- ---- ------- ----- ----- - ---------------------- ----- --------- - - ------ - --------- ----- -- -- - ----- -------- - ----- --------------------------------------- ------ ---------------- - - -
在这个例子中,我们使用 node-fetch
模块来进行请求,并在 resolver 函数里将 REST API 的数据解析为 JSON 数据。这样,我们就可以在 GraphQL 中使用 getUsers
查询来访问 REST API 并获取用户数据了。
如何处理基于关系的数据?
在 RESTful API 中,基于关系的数据通常需要在请求时进行多次嵌套查询,这在 GraphQL 中表现为深度嵌套的查询结构。例如,获取某一篇文章的评论需要先获取到该篇文章的 ID,然后再查询该篇文章下的所有评论。
在 GraphQL 中,我们可以使用 @defer
和 @stream
两个 directive 来处理基于关系的数据,使其更直观和高效。例如,
-- -------------------- ---- ------- ---- ---- - --- --- ------ ------- -------- ------ --------- ---------- ------ - ---- ------- - --- --- ------- ------ ----- ------ -
在这个例子中,我们定义了两个 GraphQL 类型: Post
和 Comment
。Post
对象包含四个字段:id
,title
,content
和 comments
。comments
字段返回的是一个 Comment
类型的数组,并使用了 @defer
directive。这表示 comments
字段不会在第一次查询时与 Post
类型一起返回,而是在必要时才进行嵌套查询。
另外,@stream
directive 可以用于流式传输数据。例如,
type Query { streamComments(postId: ID!): [Comment!]! @stream }
在这个例子中,我们定义了一个 streamComments
查询,该查询返回一个带有 ID
参数的数组,使用了 @stream
directive。这表示 streamComments
查询将立即返回一个空数组,但是我们可以随时更新这个数组,并将增量数据流发送回客户端。可以用于长轮询、WebSockets 或其他技术场景。
总结
在本文中,我们介绍了如何在 GraphQL 中使用现有的 REST API 进行数据获取。通过了解 RESTful API 的架构原理,我们可以使用自定义的 GraphQL 字段来查询 API 的数据。同时,当处理基于关系的数据时,我们可以通过使用 @defer
和 @stream
directive 来处理跨越多个嵌套查询的数据结构。
建议在实际项目中对 GraphQL 和 REST API 的结合进行实践,学习如何更加高效利用它们带来的优势。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/6476a62c968c7c53b034e713