@sheerun/graphql-anywhere 是一个轻便、易用的 Graphql 工具包，它可以帮助你在任何数据源上执行 GraphQL 查询。它可以让开发者使用 GraphQL 查询语言，对非 Graphql 数据源进行查询，对于前端开发者来说有很大的帮助。下面是一个详细的教程，让您理解如何在项目中使用 @sheerun/graphql-anywhere 包。
安装
您可以使用 Npm 或者 Yarn 安装 @sheerun/graphql-anywhere 包。你可以执行下列命令来进行安装。
npm install @sheerun/graphql-anywhere # 或者 yarn add @sheerun/graphql-anywhere
基础使用
假设你有一个简单的 React 应用，其中有一个组件来从非 Graphql 数据源中加载数据。例如，你可能有一个 REST API ，你需要将其转换为可被 Graphql 使用的数据。 这就是使用 @sheerun/graphql-anywhere 的场景。
-- -------------------- ---- ------- ------ - ------- - ---- ---------------------------- ------ - ------- - ---- ---------- ------ - ----- - ---- --------------------------- ------ - -------- - ---- ------------------- ------ - ------------ - ---- ---------------- ------ ----- ---- ------------------ ----- ------ - --- -------------- ----- --- ---------- ---- -------------------- --- --- ----- ---- - -------- ------- -------- -------- ------------- -- ------------------------------- -------------------------
代码中，我们先定义了一个 Apollo 客户端，它使用了 RestLink，指向了我们所需要请求的 API 路径。之后，我们使用了 graphql 函数，同时传入我们的查询语句和一些其他的参数。最后，这个 graphql 函数返回了被处理过的 GraphQL Query 对象和结果。
指令使用
有时候，我们需要向我们的 Graphql 查询语句中添加一些指令来匹配我们的需求。下面是一个例子。
-- -------------------- ---- -------
------ - ------- - ---- ----------------------------
------ - ------- - ---- ----------
------ - ----- - ---- ---------------------------
------ - -------- - ---- -------------------
------ - ------------ - ---- ----------------
------ ----- ---- ------------------
----- ------ - --- --------------
----- --- ---------- ---- -------------------- ---
---
----- ---- - ---------
----- -
-------- ------ ----------- ------- ----- ----------- -
--
----
-
-
-- -------- --------------
-------------------------------
-------------------------在这个代码示例中，我们向我们的 Graphql 查询语句中添加了一个 @rest 指令，它将我们的查询路由到了原始的 Rest API。因为我们使用了这个指令，所以对我们的查询请求进行的就是一个 Rest API 请求，但这个请求是通过 Graphql 进行的，这个指令就是起到的连接作用。
变量
在某些情况下，我们需要使用变量来改变 Graphql 查询语句。下面是一个例子。
-- -------------------- ---- -------
------ - ------- - ---- ----------------------------
------ - ------- - ---- ----------
------ - ----- - ---- ---------------------------
------ - -------- - ---- -------------------
------ - ------------ - ---- ----------------
------ ----- ---- ------------------
----- ------ - --- --------------
----- --- ---------- ---- -------------------- ---
---
----- ---- - ---------
----- --------- -------- -
-------- ---- ----------- ------- ----- ----------- -
--
----
-
-
-- -------- ------------- - --- ----- ---
-------------------------------
-------------------------在这个代码示例中，我们为 Graphql 查询语句添加了一个变量。我们之所以使用变量是因为我们想查询不同的 user 对象，而我们从 web 应用程序中获取用户 ID （在这个例子中为 123)。
缓存
在应用程序中使用缓存可以提升查询性能、减少 API 请求次数、降低开销。@sheerun/graphql-anywhere 支持缓存，下面是一个例子。
-- -------------------- ---- -------
------ - -------- ------------- - ---- ----------------------------
------ - ------- - ---- ----------
------ - ----- - ---- ---------------------------
------ - ------------- - ---- ------------------------
------ - -------- - ---- -------------------
------ - ------------ - ---- ----------------
------ ----- ---- ------------------
----- ------ - --- --------------
------ --- ----------------
----- --- ---------- ---- -------------------- ---
---
----- ----- - ---------------------------- ---- - --------- -- ---- -- -
----- ----- - --------------------------------------
----- --------- - ------------------------------------
------ ----------- ------ --------- ---
---
-- ------- -
-------------------
- ---- -
---------
----- --------- -------- -
-------- ---- ----------- ------- ----- ----------- -
--
----
-
-
-- -------- ------------- - --- ----- ---
-在这个示例代码中，我们创建了一个 Apollo 客户端，并根据 Graphql 查询请求从缓存中读取数据。如果缓存中有数据，它会被直接输出，而不是进行网络请求。如果没有缓存，我们就会向服务器发送一个查询请求，并将数据添加到缓存中。
结论
@sheerun/graphql-anywhere 是一个功能强大的 Graphql 工具包，它可以让您在非 Graphql 数据源上执行查询，并允许您通过指令和变量自定义查询。同时，它还支持缓存，帮助您提升查询性能，减少 API 请求次数和开销。无论您是在构建 React 应用程序，还是构建其他工具，这个工具包都是值得尝试的。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005630181e8991b448e0db9