GraphQL 是一种基于类型系统的查询语言，用于在 API 层面增强 Web 应用程序的能力。preact-cli-plugin-graphql 是一个在 Preact CLI 中使用 GraphQL 的插件，它提供了简单易用的接口，方便用户在 Preact 应用程序中使用 GraphQL。
如果你想要了解更多有关 GraphQL 的知识，可以查看 GraphQL 官方文档。
安装 preact-cli-plugin-graphql
首先，你需要在你的 Preact 项目中安装 preact-cli-plugin-graphql。可以通过以下命令进行安装：
npm i preact-cli-plugin-graphql --save-dev
添加 GraphQL 配置
接着，在你的项目根目录下创建一个 graphql.config.js 文件，并在其中添加要连接的 GraphQL 服务的 URL。假设你使用的是 Apollo GraphQL 服务：
module.exports = {
url: "https://your-graphql-server.com",
};在 Preact CLI 中使用 preact-cli-plugin-graphql
接下来，我们将添加 GraphQL 的支持到 Preact CLI 中，这样我们就可以在 Preact 应用程序中使用 preact-cli-plugin-graphql。
在 preact.config.js 中添加以下内容：
// preact.config.js
const preactCliPluginGraphql = require("preact-cli-plugin-graphql");
export default function (config) {
// ...
preactCliPluginGraphql(config);
}这个 preact-cli-plugin-graphql 将会引入以下四个工具：
graphql.macro：将 GraphQL 查询字符串转化成 AST；preact-cli-plugin-graphql/extract-fragment-data.macro：将 GraphQL 的 fragment 转化成可重用的数据对象，以便进行组合；preact-cli-plugin-graphql/loaders/graphql-loader.js：将 GraphQL 查询字符串打包进 JavaScript 文件；preact-cli-plugin-graphql/hooks/use-query-client.js：将用于进行 GraphQL 查询的 Apollo Client 暴露为 React Hook。
示例代码
现在我们将使用 preact-cli-plugin-graphql 实现一个简单的 GraphQL 查询。
首先，让我们安装 Apollo Client 和 GraphQL Code Generator：
npm i apollo-boost react-apollo graphql-codegen --save
然后，我们可以创建一个简单的 GraphQL 查询文件 src/query.graphql：
query {
getUser {
id
name
email
}
}现在，我们创建一个名为 FetchUserData.js 的文件，它将包含我们的 GraphQL 查询和组件逻辑：
-- -------------------- ---- -------
------ - - - ---- ---------
------ - -------- - ---- ---------------------------------------------------
------ --- ---- --------------
----- --------- - ----
----- -
------- -
--
----
-----
-
-
--
------ ----- ------------- - -- -- -
-- -------- ----------------
----- - ----- -------- ----- - - --------------------
-- --------- ------ ----------------------
-- ------- ------ ----------- ----------------------
------ -
-----
----------------------------
---------------------------
------
--
--在 index.js 中渲染 FetchUserData 组件：
import { h, render } from "preact";
import { FetchUserData } from "./FetchUserData";
render(<FetchUserData />, document.getElementById("root"));最后，我们需要生成代码以便能够实现 GraphQL 查询。在 package.json 中添加以下命令：
{
"scripts": {
"generate": "graphql-codegen --config codegen.yml"
}
}然后，在项目根目录下创建 codegen.yml：
-- -------------------- ---- -------
---------- ----
------- -----------------------------------------
----------
-----------------------
--------
- ----------
- ---------------------
- -----------------------
---------- ------------------现在，运行 npm run generate 命令，GraphQL 查询代码将会被生成，并被写入到 src/types/graphql.d.ts 文件中。现在我们的应用程序已经可以使用 GraphQL 查询了！
结论
在本文中，我们介绍了如何安装 preact-cli-plugin-graphql，并使用 GraphQL 查询服务器进行数据查询。后面我们还通过实现一个使用 preact-cli-plugin-graphql 的应用程序来讲解了如何使用此插件。
我希望这篇文章能够提供你在 Preact 应用程序中实现 GraphQL 支持的一个简单易用的方法，并让你受益于 GraphQL 强大的数据查询和类型检查能力。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055fec81e8991b448ddaeb