GraphQL 是一种由 Facebook 发布的查询语言，可以更高效、更强大地管理 API。而 grql 则是与 GraphQL 平台互动的 JavaScript 客户端库，非常适合用于编写 UI 应用程序或者其他需要通过 GraphQL 从后端请求数据的应用程序。本文将详细介绍 npm 包 grql 的使用方法。
安装 grql
首先，我们需要通过 npm 安装 grql 包。打开终端或命令行工具，运行以下命令：
npm install --save graphql graphql-tag react-apollo apollo-link-http apollo-boost
以上命令会将 graphql、 graphql-tag、react-apollo、apollo-link-http 和 apollo-boost 这几个包都安装到你的项目中。其中，grql 是 react-apollo 的一个子集。
配置 grql
接下来，我们需要配置 grql。在项目的根目录下创建一个名为 apollo.js 的文件，并将以下代码复制进去：
-- -------------------- ---- ------- ------ ------------ ---- --------------- ------ - ------------- - ---- ------------------------ ------ - -------- - ---- ------------------- ----- ----- - --- ---------------- ----- ------ - --- -------------- ------ ----- --- ---------- ---- ---------------------------------- -- ----------- ------- ----- --- --- ------ ------- -------展开代码
在以上代码中，我们使用了 apollo-boost 包创建了一个新的 ApolloClient 实例。通过 HttpLink，我们将这个实例和我们的 GraphQL 服务器连接起来，并定义了服务端 GraphQL API 的地址。这里你需要将地址替换成你自己的 GraphQL 服务器地址。
创建 grql 查询
接下来，我们将定义一个 grql 查询并从 GraphQL 服务器获取数据。在项目的某处，创建一个新的名为 Home.js 的文件，将以下代码复制进去：
-- -------------------- ---- ------- ------ ----- ---- -------- ------ - ----- - ---- --------------- ------ --- ---- -------------- ------ ------ ---- ----------- ----- --------- - ---- ----- -------- - ----- - -- ---- ----- - - -- ------ ------- -------- ------ - ------ - ------ ----------------- ---------------- --- -------- ------ ---- -- -- - -- --------- ------ ------------------ -- ------- ------ -------- ------- ------ ----------------- --- ----- ----- -- -- - ---- --------- ------------- -------------- ------ --- -- -------- -- -展开代码
在以上代码中，我们首先定义了一个名为 GET_USERS 的 grql 查询语句。然后，我们通过 react-apollo 包的 Query 组件进行查询，并传入了 client 配置项和 GET_USERS 查询语句。最后，根据查询结果渲染组件。
启动项目并查看结果
现在可以启动你的项目，并在浏览器查看结果。运行以下命令：
npm start此时，在浏览器中打开 http://localhost:3000，你将看到刚才定义的 grql 查询返回的所有用户列表。
总结
本文介绍了如何使用 npm 包 grql 请求 GraphQL 服务器并获取数据。通过本文学习，你可以更加深入地掌握如何使用 grql 客户端库编写与 GraphQL 互动的 JavaScript 应用程序。欢迎进一步探索和尝试使用 grql。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/79392
