介绍
gatsby-source-modular-graphql 是一款适用于 gatsby 的 graphql 数据源插件，它可以方便地从任何 graphql api 数据源中获取数据并在你的网站中使用。
该插件提供了一些有趣的功能，如自定义查询、关系查询、数据转换等，可以帮助开发人员更好地定制网站内容，并将网站从静态文档变为动态内容。
在本文中，我们将讨论如何使用 gatsby-source-modular-graphql 插件，并提供示例代码和说明。
安装
如要在你的项目中使用 gatsby-source-modular-graphql 包，你可以使用 npm 进行安装：
npm install gatsby-source-modular-graphql
使用
基本使用
使用 gatsby-source-modular-graphql 插件，需要在 gatsby-config.js 文件中添加如下代码：
-- -------------------- ---- -------
-------------- - -
-------- -
-
-------- --------------------------------
-------- -
---- ---- ------- --- ----
-
-
-
-在上面的代码中，你需要将 <你的 graphql api 地址> 替换成你的实际 graphql api 地址。
当你使用了上述配置后，就可以在你的代码中使用来自 graphql api 的数据了。
自定义查询
你可以在插件的配置选项中添加额外的查询来获取来自 graphql api 的特定数据。示例如下：
-- -------------------- ---- -------
-------------- - -
-------- -
-
-------- --------------------------------
-------- -
---- ---- ------- --- -----
-------- -
-
----- ------------
------ -
-
----- -
--
-----
----
-----------
-
-
-
-
-
-
-
-
-在上面的代码中，我们添加了一个名为 “blogPosts” 的查询，它将从 graphql api 中获取 id、title、body 和发布日期等信息。
现在，你可以在你的代码中通过查询名称来获取数据。示例如下：
-- -------------------- ---- -------
------ ----- ---- -------
------ - ------- - ---- --------
------ ----- ----- - --------
----- -
--------- -
--
-----
----
-----------
-
-
-
----- -------- - -- ---- -- -- -
----- ----- - --------------
------ -
-----
--------------- -- -
---- --------------
---------------------
------------------
-------------------------
------
---
------
-
-
------ ------- --------关系查询
有时，在 graphql api 中，数据之间存在关联性。例如，博客文章可能包含作者信息，或者分类信息等。在这种情况下，你可以使用 gatsby-source-modular-graphql 插件提供的关系查询功能，以方便地获取相关数据。
示例如下：
-- -------------------- ---- -------
-------------- - -
-------- -
-
-------- --------------------------------
-------- -
---- ---- ------- --- -----
-------- -
-
----- ------------
------ -
-
----- -
--
-----
----
-----------
------ -
--
----
-
-------- -
--
----
-
-
-
-
-
-
-
-
-
-在上面的代码中，我们添加了名为 “blogPosts” 查询。查询中包含了与作者和分类相关的数据。
现在，你可以在你的代码中访问这些数据，示例如下：
-- -------------------- ---- -------
------ ----- ---- -------
------ - ------- - ---- --------
------ ----- ----- - --------
----- -
--------- -
--
-----
----
-----------
------ -
----
-
-------- -
----
-
-
-
-
----- -------- - -- ---- -- -- -
----- ----- - --------------
------ -
-----
--------------- -- -
---- --------------
---------------------
------------------
-------------------------
------------------- ----------------------
--------------------- ------------------------
------
---
------
-
-
------ ------- --------数据转换
由于不同的 graphql api 可能会返回不同的数据格式，所以在 gatsby 中使用数据时，可能需要进行一些数据格式转换。这时，你可以使用 gatsby-source-modular-graphql 插件提供的转换器功能。
例如，如果你的 graphql api 的数据格式如下：
{
"id": "1",
"title": "一些示例文章",
"content": "<p>这里是文章内容</p>",
"date": "2020-01-01"
}但是，在你的 gatsby 项目中，你希望将内容作为 markdown 输出。在这种情况下，你可以使用 gatsby-source-modular-graphql 提供的转换器，并将数据转换为所需的格式。
示例如下：
-- -------------------- ---- -------
----- - ---------- - - ---------------------------------------------------
-------------- - -
-------- -
-
-------- --------------------------------
-------- -
---- ---- ------- --- -----
-------- -
-
----- ------------
------ -
-
----- -
--
-----
-------
----
-
-
--
---------- -- ---- -- -- -
----- ----- - ----------
--- ------ ---- -- ------ -
------------ - ------------------------
-
------ -
-----
-
-
-
-
-
-
-
-在上面的代码中，我们添加了一个名为“blogPosts”的查询，并使用 toMarkdown() 转换器将内容转换为 markdown 格式。
现在，你可以在你的代码中访问转换后的数据，如下所示：
-- -------------------- ---- -------
------ ----- ---- -------
------ - ------- - ---- --------
------ ------------- ---- ----------------
------ ----- ----- - --------
----- -
--------- -
--
-----
-------
----
-
-
-
----- -------- - -- ---- -- -- -
----- ----- - --------------
------ -
-----
--------------- -- -
---- --------------
---------------------
-------------- --------------------- --
------------------
------
---
------
-
-
------ ------- --------结论
在本文中，我们介绍了如何使用 gatsby-source-modular-graphql 插件来方便地获取 graphql api 中的数据。
通过添加自定义查询、关系查询和转换器，我们可以定制网站内容，并将网站从静态文档变为动态内容。
如果你想了解更多关于 gatsby 和 graphql 的内容，请查阅文档。
示例代码
你可以在下面的链接中找到上述示例代码的完整版本：
https://github.com/example/gatsby-source-modular-graphql
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671ba30d092702382277a