前言
在现代前端开发中，静态网站生成器（SSG）已成为一个十分流行的解决方案。其中，Gatsby 凭借其高效的构建速度、灵活的数据源结构和出色的开发体验，成为了最容易上手且使用最广泛的 SSG 之一。
Gatsby 默认支持多种数据源，并且可以自定义数据源。而 gatsby-source-carraway 则是一款非常实用的自定义数据源插件，它提供了访问保罗·卡雷韦小说作品集的 API 和相关数据的功能，同时也可以帮助你学习如何编写自己的 Gatsby 数据源插件。
本文将详细介绍 gatsby-source-carraway 的使用方法，包括：
- 安装和配置
- 数据源的查询与使用
- 深入理解 gatsby-source-carraway 插件
同时，我们还将通过示例代码展示如何在 Gatsby 站点中利用此插件来构建一个带有小说搜索功能的准静态网站。
安装和配置
要使用 gatsby-source-carraway 插件，我们首先需要将其安装为 npm 包。在终端窗口中使用如下命令：
npm install gatsby-source-carraway
安装完成后，在 Gatsby 项目配置文件 gatsby-config.js 中添加以下内容：
-- -------------------- ---- ------- -------------- - - -------- - - -------- ------------------------- -------- - ------- ----- --- ----- -- -- -- ---- -- -- ---- --展开代码
在上述代码中，我们使用了 gatsby-source-carraway 插件，并传递了一个 options 参数对象，其中包含了必要的 API 密钥（apiKey），以便我们在之后的开发过程中访问 Carraway API。
获取 API 密钥
如果您还没有 Carraway API 的访问密钥，可以前往官网 [https://carraway.cn/dashboard/api] 申请免费的 API 密钥。在申请时，需要填写您的邮箱地址以及应用的名称，系统将自动为您生成一组 API 密钥。
申请成功后，您可以在仪表盘的“应用”页面中查看到您的应用信息和 API 密钥。
数据源的查询与使用
在配置完成后，我们就可以访问保罗·卡雷韦小说作品集的数据，并将其用于构建 Gatsby 站点了。
查看节点类型
首先，我们需要了解 gatsby-source-carraway 插件生成的节点类型及其字段信息。可以通过执行如下命令来查看：
gatsby develop然后，在浏览器中打开 http://localhost:8000/___graphql 页面，在左侧的 GraphiQL 查询界面中输入以下代码，便可以看到我们可以访问到的节点类型及其字段信息：
-- -------------------- ---- ------- ----- - ---------------- - ----- - -- ----- ------ -------- ----------- ------ --------- -------- - -- ------------ - -------- - ---- - -- -------- - ------- ---------- - ------- --- - - -展开代码
查询节点数据
在了解了节点类型及其字段信息后，我们可以在 Gatsby 项目中利用 GraphQL 查询语句来访问和使用这些数据。例如，在 Gatsby 页面组件中，我们可以使用以下代码来查询小说集合和小说详情：
-- -------------------- ---- ------- ------ ----- ---- -------- ------ - ------- - ---- --------- -- ------ ---- ------ ------- -------- ----------- ---- -- - ----- - ------------- - - ----- -- - ----- ------- ------ - -- ------------------------------ ---------------------------------- ---- ---------------------------- ------------------------- -- --- -- - -- -------- ------ ----- ----- - -------- ---------- -------- - ----------------- - --- --- -- - -- ----- ------ -------- ----------- ------ --------- -------- - -- ------------ - -------- - ---- - -- -------- - ------- ---------- - ------- --- - - --展开代码
在上述代码中，我们使用 graphql 函数和 query 模板字符串来定义了一个变量 data，它包含了从 gatsby-source-carraway 插件中获取的节点数据。之后，我们可以在 JSX 中使用此数据来展示小说标题、封面、描述等信息。
查询小说集合并添加搜索功能
除了查询单个小说的详情外，我们还可以使用 GraphQL 查询语句来从小说集合中查询符合条件的小说，并将其用于构建搜索功能。以下是一个可以通过关键字搜索小说的示例代码：
-- -------------------- ---- ------- ------ ------ - -------- - ---- -------- ------ - ------- - ---- --------- -- ------ ---- ------ ------- -------- --------------- ---- -- - ----- - ---------------- - - ----- -- - ----- ------- ----- ------------ -------------- - ------------- -- --------------- ----- -------------- - ------------------------------------- -- ------------------------------------------------------------ -- ------ - -- ------ ----------- -------------------- ------------- -- ------------------------------ -- ---- --------------------------- -- - --- --------------- ---------------------- -------------------------- ---- -------------------- ----------------- -- ----- --- ----- --- -- - -- ------ ------ ----- ----- - -------- ----- - ---------------- - ----- - -- ----- ------ -------- ----------- ------ --------- -------- - -- ------------ - -------- - ---- - -- -------- - ------- ---------- - ------- --- - - - --展开代码
在上述代码中，我们为 NovelListPage 组件添加了一个文本框 input 并绑定了 setSearchTerm 方法来接收用户输入的搜索关键字。然后，我们使用 useState 钩子和 filter 方法来过滤出符合搜索关键字的小说实体，最后在 map 方法中展示它们的标题、封面、描述等信息。
深入理解 gatsby-source-carraway 插件
在了解了如何使用 gatsby-source-carraway 插件后，我们可以进行更深入的学习，并自行编写自定义的 Gatsby 数据源插件。
数据源是什么
在 Gatsby 中，数据源（Data Source）是指从外部数据源中获取数据并转换为 Gatsby 节点的一种方式。例如，我们可以从 CMS、API、文件系统等数据源中获取数据，并将其转换为 Gatsby 节点，然后使用 GraphQL 查询语句来获取和使用这些节点数据， 以便在 Gatsby 页面中展示内容。
基于 Gatsby 状态机的数据源开发
在 Gatsby 中，数据源是由某个状态机节点驱动的，并负责从外部数据源获取和处理数据，并将其转换为 Gatsby 节点。状态机节点从状态机节点创建器中获取唯一 ID，并自动将其分配给节点。每个自定义数据源插件实现都需要实现两个状态机节点类型：数据源节点和访问节点。
- 数据源节点（Source Nodes）：负责从外部数据源获取和处理数据，并将其转换为 Gatsby 节点。
- 访问节点（Access Nodes）：负责从数据源节点获取的 Gatsby 节点中查询具体数据，以便我们在 Gatsby 页面中展示。
编写自定义数据源插件
在深入学习完 Gatsby 数据源开发基础知识后，我们可以尝试自己编写一个基于 gatsby-source-carraway 插件的自定义数据源插件，并将小说搜索功能集成到 Gatsby 站点中。
首先，我们需要创建一个 gatsby-node.js 文件，并引入 createRemoteFileNode 和 node-fetch 库作为依赖项。我们还需要创建一个方法 createNovelNodes，它负责从 Carraway API 获取保罗·卡雷韦小说作品集及相关数据，并将其转换为 Gatsby 节点。以下是示例代码：
-- -------------------- ---- ------- ----- ----- - ---------------------- ----- - -------------------- - - ------------------------------------ ------------------- - ----- -- -------- ------------- ------------------- -- -- - ----- - ---------- - - -------- ----- -------- - ----- ------------------------------------------ ----- ------ - ----- ---------------- ----- ---------- - ------------ -- -------- ------ -- ---------------------------- ----------- ------------- -------------------- ---------------------- -- -- -------- ------ -- -------- ---------------------------- ----------- ------------- -------------------- --------------------- - -------------------------- -- - ----- ------ - ---------------------------------- -- ------------- ------ --- ----- -------- - - --- ------- ------- ----- --------- --- --------- - ----- --------------- - -- ----- ----------- - ---------------------- ----- ----------------- - --------------------------------- ----- --------------- - ---------------------- ---- --------------- ------------- ------- ----------- ------------- -------------------- --- ----------------------------------------------- -- - ----- --------- - ------------- ------------ --------- --- ------- ------------- ------------- ------- ----- --------- --- --------- - ----- ---------------- -------- ------------ -------------- ------------------ -- --- --- --- -展开代码
在上述代码中，我们首先使用了 node-fetch 库和 fetch 方法来从 Carraway API 获取小说集合信息。之后，我们通过 createNode 方法将小说集合数据转换为 Gatsby 节点，并为每个节点添加一个唯一的 ID。此外，我们还使用 createRemoteFileNode 方法将小说封面图片下载并添加到 Gatsby 节点中，以便我们在 Gatsby 页面中展示图片。
在节点数据准备就绪后，我们可以在 Gatsby 站点中使用以下代码来添加小说搜索功能：
-- -------------------- ---- ------- ------ ------ - -------- - ---- -------- ------ - ------- - ---- --------- -- ------ ---- ------ ------- -------- --------------- ---- -- - ----- - ---------------- - - ----- -- - ----- ------- ----- ------------ -------------- - ------------- -- --------------- ----- -------------- - ------------------------------------- -- ------------------------------------------------------------ -- ------ - -- ------ ----------- -------------------- ------------- -- ------------------------------ -- ---- --------------------------- -- - --- --------------- ---------------------- -------------------------- ---- --------------------- ----------------- -- ----- --- ----- --- -- - -- ------ ------ ----- ----- - -------- ----- - ---------------- - ----- - -- ----- ------ ----- - --- - ----------- ------ --------- -------- - -- ------------ - -------- - ---- - -- -------- - ------- ---------- - ------- --- - - - --展开代码
在上述代码中，我们为 NovelListPage 组件添加了一个文本框 input 并绑定了 setSearchTerm 方法来接收用户输入的搜索关键字。使用 filter 方法和 includes 方法，我们过滤出符合搜索关键字的小说实体，并在 map 方法中展示它们的标题、封面、描述等信息。
以上便是基于 gatsby-source-carraway 插件开发自定义数据源插件的完整过程。如果您想要深入学习 Gatsby 数据源的开发，可以参考官方文档 [https://www.gatsbyjs.com/docs/how-to/creating-a-source-plugin/] 获取更多信息。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066b5251ab1864dac66909
