什么是 preact-graphql
preact-graphql 是一个用于在 preact 应用中使用 GraphQL 的 npm 包。preact 和 GraphQL 都是现代化前端技术，它们的结合可以使开发者们更高效地构建应用和完成数据查询。
安装 preact-graphql
接下来我们来介绍一下如何安装 preact-graphql。
使用 npm 安装
通常我们会使用 npm 进行安装，使用如下命令安装 preact-graphql：
npm install preact-graphql --save
直接使用 CDN
我们也可以直接使用 CDN，只需要在 HTML 文件中引用以下两个链接即可：
<script src="https://unpkg.com/preact"></script> <script src="https://unpkg.com/preact-graphql"></script>
使用 preact-graphql
安装完成之后，我们来看一下如何使用 preact-graphql 进行数据查询。
引入 preact-graphql
在代码中引入 preact-graphql：
import { h, Component } from 'preact';
import { createApolloFetch } from 'preact-graphql';创建 graphqlFetch
我们需要创建一个 graphqlFetch 来进行数据查询。这可以通过 createApolloFetch 进行创建：
const graphqlFetch = createApolloFetch({ uri: 'https://api.graph.cool/simple/v1/swapi' });其中，uri 对应的是我们要查询的 GraphQL 服务地址。
查询数据
我们需要使用 graphqlFetch 进行数据查询，例如：
-- -------------------- ---- -------
--------------
------ -
----- --------------------------- ---- -
---------- ---------- -
----
------
--------- -
----
-
----- -
-----
-
-
-
--
---------- -
--------- --------------
-
-------------- -- -
--------------------
---这段代码会查询得到 ID 为 cGVvcGxlOjIx 的人物的名称、性别、出生星球和演出电影列表。
总结
本篇文章介绍了 preact-graphql 的安装和使用，示例代码详细地展示了如何使用 preact-graphql 进行数据查询。preact-graphql 的出现可以使我们更加便捷地进行 GraphQL 数据查询，提高代码效率，是前端开发者们的必备工具之一。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055e3281e8991b448dbaf9