近年来，前端工程化和自动化程度越来越高，开发者们无意间创造了许多更加便捷、高效的工具。其中，npm 是最引人注目的之一，它不仅可以节约我们的开发时间，而且还能够极大的提高开发流程的可维护性，快速地构建我们自己的项目。今天，我们将会探讨一个非常流行的 npm 包 — gatsby-source-github，这个包可以帮助我们更好地与 Github API 进行交互，获得更不一样的开发体验。
gatsby-source-github 是什么
gatsby-source-github 可以看作是一个 Gatsby 插件，用于从 Github 获取数据。Gatsby 是一个用于构建静态网站的现代化开源框架，有着非常优秀的性能和体验。它支持在构建时预加载数据，大大减少页面加载时间，提高了用户的体验感。gatsby-source-github 可以帮助我们更好的利用 Github 作为数据源，从而更快地创建我们的 Gatsby 站点。
安装 gatsby-source-github
在开始使用 gatsby-source-github 之前，我们需要安装它。可以像下面一样使用 npm 安装：
npm install --save gatsby-source-github
安装完成后，我们还需要在 gatsby-config.js 中配置我们的 github 引用。
添加配置
我们可以在 gatsby-config.js 文件中添加如下代码：
-- -------------------- ---- -------
-------------- - -
-------- -
-
-------- -----------------------
-------- -
-------- -
-------------- ------- -----------------------------
--
-------- -
-
-
----------------- ---------- ----- --------- -
------------ --- -
----- -
---- -
--
------
-----
---
-
-
-
-
-
--
--
--
--
--
--其中，Authorization 是 Github 用于访问私有存储库的令牌，该令牌需要在 Github 上创建。
查询数据
配置完成后，我们可以使用 GraphQL 查询语句从 Github API 获得数据，如下所示：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ ------- -- ---- -- -- -
----- ----- - --------------------------------
----- ------ - -------------------
------ -
-----
---------- -- ---- ---------------
----
-------------- ---- -- -- -
--- --------------
-- --------------------------------
-----
---
-----
------
--
--
------ ----- ----- - --------
-
---------- -
---- -
---------- -
------------ --- -
----- -
---- -
--
-----
---
-
-
-
-
-
-
-
--在查询和使用 Github 数据时，我们需要非常明确地了解 Github API。执行查询时，我们需要按照 API 返回的 JSON 格式进行数据解析，在解析时，我们可以使用如 github-trending 之类的项目以帮助我们更好地处理 Github API 返回的 JSON 数据。在遇到问题时，有时我们也需要去 Github 官方查阅相关文档以获得帮助。
总结
在我们的前端开发中，有时我们需要通过各种手段从服务器端中获取数据。Github API 作为一个非常优秀的开发者社区，不仅提供了许多丰富、高质量的开发资源，而且还可以成为我们的数据源之一。使用 gatsby-source-github，我们可以更便捷地操作 Github API 和 Gatsby，快速创建一个更为优秀、更加稳定和可靠、更快和易于维护的站点。
Happy Coding！🎉
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedb3dbb5cbfe1ea06111dd