GraphQL 是一种由 Facebook 开发的数据查询语言，它使用一个强类型的 Schema 定义来描述数据和查询。使用 GraphQL 可以很容易地获取和操作多个数据源。在前端开发中，GraphQL 提供了一种简单而灵活的方式来获取数据并进行可视化，同时也可以避免传统 API 的一些问题。
开始使用 GraphQL
如果你还没有使用过 GraphQL，可以先安装它。在终端中，使用以下命令安装“graphql”和“express”：
$ npm install graphql express
创建 GraphQL 服务器
接下来，在代码中创建GraphQL服务器。我们将使用GraphQL的自定义类型来描述数据。下面是一个GraphQL schema的基本示例：
-- -------------------- ---- -------
----- - -------- ----------- - - -------------------
----- ------ - -------------
---- ----- -
------ ------
-
---
----- ---- - -
------ -- -- -
------ ------- ----------
--
--
--------- ------- ------- -- ----- --- ---------- ---- ------------------ -- -
---------------------------
---运行此代码，控制台将打印出“Hello, GraphQL!”。
将 GraphQL 集成到前端
现在，我们已经有了一个 GraphQL 服务器，可以将其与前端集成。我们将使用 React 和 Apollo-Client 库来辅助 GraphQL 的编写和查询。
首先，让我们安装必要的包：
$ npm install react react-dom prop-types @apollo/react-hooks graphql apollo-boost
现在，让我们创建一个 React 组件来查询数据：
-- -------------------- ---- -------
------ ----- ---- --------
------ - -------------- - ---- ----------------------
------ ------------ ---- ---------------
------ --- ---- --------------
----- ------ - --- --------------
---- --------------------------------
---
----- --- - -- -- -
----- - -------- ------ ---- - - -------------
-
-----
-
---
-- --------- ------ ------------------
-- ------- ------ -------- -------
------ --------------------
--
----------------
--------------- ----------------
---- --
------------------
-------------------------------
--这个组件使用 Apollo-Client 和 useQuery hook 来查询 GraphQL 服务器。我们只需指定 GraphQL 查询语句，然后将其传递给 useQuery hook。在我们的示例中，我们查询了一个名为“hello”的字段，并在页面上呈现其响应。
请求和响应
GraphQL 强调“只请求所需的数据”，这意味着可以指定我们需要哪些数据，而无需获取不需要的数据。下面是一个 GraphQL 查询的示例：
{
user(id: "123") {
name
email
}
}服务器将查询 ID 为“123”的用户数据，并返回其名称和电子邮件地址。
在前端，我们可以使用以下代码来查询 GraphQL 服务器：
const { loading, error, data } = useQuery(gql`
{
user(id: "123") {
name
email
}
}
`);其中，useQuery hook 接受一个对象，该对象包含将发送到服务器的 GraphQL 查询。如果查询成功，数据字段将包含响应数据。
可视化 GraphQL 数据
在我们的 GraphQL 应用程序中，我们还可以使用工具来可视化我们的数据。例如，GraphiQL 是一个强大的 GraphQL IDE，它提供了一种探索 GraphQL 数据的简单方法。
要使用 GraphiQL，可以在浏览器中访问 GraphiQL Playground（https://www.graphqlbin.com/v2/6RQ6TM）。
在该工具中，可以输入我们的 GraphQL 查询，并在右侧查看响应数据。这是一个极好的工具，可让我们在不离开浏览器的情况下查看和可视化后端 GraphQL 数据。
总结
GraphQL 是现代 Web 应用程序开发的一种重要工具，可以帮助前端开发工程师从后端获取和操作数据。本文介绍了如何在前端使用 GraphQL 进行数据可视化，以及如何使用 React 和 Apollo-Client 库来查询 GraphQL 服务器。希望这篇文章对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6453832b968c7c53b07ddf4b