前言
在前端开发中，许多项目需要与数据源进行交互。而在使用 Gatsby 框架开发静态网站时，我们经常会遇到需要将 Medium 博客的文章或者作者信息展示在网站上的需求。而 gatsby-source-medium-users 是一个可以将 Medium 上指定用户的文章信息获取后，转换成 GraphQL 资源供 Gatsby 中使用的 NPM 包。本文将介绍 gatsby-source-medium-users 包的使用流程，适用于想在 Gatsby 中实现展示 Medium 用户的博客或者作者信息的开发者。
安装
在终端中，运行以下命令以安装 gatsby-source-medium-users：
npm install --save gatsby-source-medium-users
使用
在博客的阅读页面中获取 Medium 用户的链接，例如 https://medium.com/@medium
在 Gatsby 项目的 gatsby-config.js 文件中进行配置：
-- -------------------- ---- -------
-------------- - -
-------- -
-
-------- -----------------------------
-------- -
--------- ---------
--
--
--
-username 需要填写上步骤中获取的 Medium 用户名。
- 在 Gatsby 项目中执行以下命令编译并启动服务：
gatsby develop
在浏览器中输入 http://localhost:8000/\_\_graphql，可以看到类似于 GraphQL Playground 的界面。
- 在 GraphQL Playground 中输入以下代码获取 Medium 用户的文章信息：
-- -------------------- ---- -------
-
--------------------- - -------- - --- - --- --------- - - -- -
----- -
---- -
--
-----
----------------------- ----- ---------
-------- -
------------ -
-------
-
---- -
----
-
-
-
-
-
-user-id 需要填写 Medium 用户的 ID，可以在 Medium URL 中获取。
示例代码
-- -------------------- ---- -------
------ ----- ---- -------
------ - ------- - ---- --------
------ ------- -------- ------ ---- -- -
------ -
-----
---------- ----------
-------------------------------- ---- -- -- -
---- --------------
---------------------
-----------------------
----
-------------------------------------------------------------------------------------------
------
--
----------------------------- -- -
----- --------------------------------
---
------
---
------
-
-
------ ----- ----- - --------
----- -
--------------------- - -------- - --- - --- --------- - - -- -
----- -
---- -
--
-----
----------------------- ----- ---------
-------- -
------------ -
-------
-
---- -
----
-
-
-
-
-
-
-结语
通过使用 gatsby-source-medium-users，我们可以方便的在 Gatsby 中获取 Medium 用户的文章信息。在实际开发中，可以根据用户需求进行自定义配置，例如获取指定标签下的文章信息等等。希望本文对使用 gatsby-source-medium-users 进行开发的开发者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671a330d09270238223f6