如果你是一个喜欢读书的前端工程师，那么 @jamesdanylik/gatsby-source-goodreads 这个 npm 包可能会给你带来很大的帮助。本篇文章将详细讲解如何使用这个包来获取你在 Goodreads 上的阅读数据，并在 Gatsby 上进行展示。
什么是 Goodreads？
Goodreads 是一个社交阅读平台，用户可以在上面记录自己的阅读历程，分享读书笔记，收藏书单等。同时，Goodreads 还提供了丰富的图书信息资源，包括图书信息、书评等。这个平台已经成为了全球最大的书评社交平台之一。
什么是 @jamesdanylik/gatsby-source-goodreads？
@jamesdanylik/gatsby-source-goodreads 是一个 Gatsby 插件，它可以让你在 Gatsby 中访问 Goodreads 上的阅读数据并进行展示。具体来说，它可以让你获取以下几个方面的数据：
- 阅读进度和状态
- 书评
- 读书笔记
- 在 Goodreads 上的成就和统计信息
安装和配置
首先，我们需要在项目中安装该插件，可以使用 npm 安装：
npm install --save @jamesdanylik/gatsby-source-goodreads
接下来，我们需要在 Gatsby 配置文件 gatsby-config.js 中配置该插件：
-- -------------------- ---- -------
-------------- - -
-------- -
-
-------- ----------------------------------------
-------- -
------- ---------------------------
------------- ---------------------------
---------- -------------------------------
--
--
--
--请将 <your_goodreads_user_id> 和 <your_goodreads_api_key> 分别替换为你在 Goodreads 上的用户 ID 和 API Key，用于进行 API 访问验证。同时，你还需要指定你想要获取的书单名，可以在 Goodreads 个人信息页面中找到。
如何获取数据并进行展示
现在，我们就可以在 Gatsby 中使用 GraphQL 查询 Goodreads 上的数据了。以下是一个简单的例子，展示如何查询自己的书评：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
----- ----------- - -- ---- -- -- -
----- ------- - ----------------------------------
------ -
-----
-------------
----
--------------------- -- -
--- ---------------------
---------------------------------
-------------------------
---
-- ----------------------- --------
-----------------------
----
-----
---
-----
------
--
--
------ ----- ----- - --------
----- -
---------------------- -
----- -
---- -
--
----
---------
---- -
----
-
---- -
-----
-
-
-
-
-
--
------ ------- ------------这个例子展示了如何使用 allGoodreadsBookReview 查询所以书评信息。通过 allGoodreadsBookReview.edges 我们可以访问所有的书评，并对其进行展示。
最终，我们可以得到类似以下的效果：
-- -------------------- ---- -------
-----
-------------
----
----
------- ------- -- --- --------
----------
----- ----- ------- -- ------ --------------
-----
----
------- ----- -----------
----------
----- ----- ------- -- ------ --------------
-----
----
------- --------------
----------
----- ----- ------- -- ------ --------------
-----
---
-----
------总结
通过 @jamesdanylik/gatsby-source-goodreads 这个 npm 包，我们可以轻松地在 Gatsby 中访问 Goodreads 上的阅读数据，并对其进行展示。本文希望给读者提供一个详细的上手指南，帮助读者轻松上手并使用该插件。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066bc4967216659e24432f