npm 包 gatsby-source-carraway 使用教程

前言

在现代前端开发中，静态网站生成器（SSG）已成为一个十分流行的解决方案。其中，Gatsby 凭借其高效的构建速度、灵活的数据源结构和出色的开发体验，成为了最容易上手且使用最广泛的 SSG 之一。

Gatsby 默认支持多种数据源，并且可以自定义数据源。而 gatsby-source-carraway 则是一款非常实用的自定义数据源插件，它提供了访问保罗·卡雷韦小说作品集的 API 和相关数据的功能，同时也可以帮助你学习如何编写自己的 Gatsby 数据源插件。

本文将详细介绍 gatsby-source-carraway 的使用方法，包括：

  • 安装和配置
  • 数据源的查询与使用
  • 深入理解 gatsby-source-carraway 插件

同时，我们还将通过示例代码展示如何在 Gatsby 站点中利用此插件来构建一个带有小说搜索功能的准静态网站。

安装和配置

要使用 gatsby-source-carraway 插件，我们首先需要将其安装为 npm 包。在终端窗口中使用如下命令：

--- ------- ----------------------

安装完成后，在 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 插件生成的节点类型及其字段信息。可以通过执行如下命令来查看：

------ -------

然后，在浏览器中打开 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

阅读全文

猜你喜欢

  • npm 包 @codemoomba/serverless-plugin-warmup 使用教程

    前言 Serverless 框架搭建的应用程序在闲置状态下可能会出现冻结的情况，冻结状态下的第一次访问需要经过一系列的操作才能恢复运行，导致响应时间较长，影响用户体验。

    3 年前
  • npm包express-ez-input-handler使用教程

    概述 在前端开发过程中，我们常常需要对用户输入的内容进行处理和验证。在传统的开发模式中，我们通常需要写大量重复的代码来实现这些功能。而现在，npm上有很多优秀的包可以帮助我们完成这些任务，其中之一就是...

    3 年前
  • npm 包 nativescript-pdf-view-private 使用教程

    前言 移动设备上展示 PDF 文件是一个非常常见的需求，但是并不是所有的 NativeScript PDF 控件都能满足需求。在这种情况下，我们需要寻找一些第三方的控件库。

    3 年前
  • npm 包 rolandmueller-palindrome 使用教程

    前言 在前端开发过程中，有时候需要用到字符串操作，比如验证一个字符串是不是回文，这时候我们可以使用 npm 包 rolandmueller-palindrome 来实现。

    3 年前
  • npm 包 gamebank 使用教程

    介绍 如果你正在开发一个游戏，那么可能会需要一个用于管理游戏中的货币、交易和钱包的库。幸运的是，在 npm 上有一个游戏货币管理库 gamebank，它提供了简单易用的 API，可以轻松管理游戏中的货...

    3 年前
  • npm 包 @uhm-jade/rbx-event 使用教程

    简介 在前端开发中，我们常常需要监听鼠标、键盘等交互事件，来触发相应的操作。而 @uhm-jade/rbx-event 就是一个非常便捷、高效的处理事件的 npm 包，其主要特点如下： 使用灵活：该...

    3 年前
  • npm 包 gb-angular-split 使用教程

    介绍 gb-angular-split 是一个基于 Angular 的 npm 包，可以用来快速创建可拖拽的分割面板。gb-angular-split 的使用非常简单且灵活，是一个非常实用的前端工具。

    3 年前
  • npm 包 my-project-npm 使用教程

    前言 在前端开发中，我们常常需要使用许多第三方库来帮助我们完成开发工作。npm 是一个非常重要的资源库，是 JavaScript 的包管理工具，可以让我们从全球范围重用代码。

    3 年前
  • npm 包 miniprogram-telemetry 使用教程

    介绍 miniprogram-telemetry 是一个使用方便的小程序数据收集工具。它能够帮助开发者收集小程序的各种数据，例如页面加载时间、用户行为等，并将数据传输到指定的服务器。

    3 年前
  • npm 包 @acyort/paginator 使用教程

    在前端开发中，经常需要进行页面的分页处理。而在 Node.js 中，npm 上有很多的分页插件，其中 @acyort/paginator 是一个非常好用的插件。本文将为大家介绍如何使用 @acyort...

    3 年前
  • npm 包 atscntrb-hx-parcomb 使用教程

    在前端开发中，我们常常需要对列表异步加载、排序、筛选等功能进行实现。而在这些功能中，参数组合算法也是非常重要的。atscntrb-hx-parcomb 是一个 npm 包，提供了参数组合算法的实现。

    3 年前
  • npm 包 node-messageq1 使用教程

    随着前端应用程序的不断发展，前端开发的工作越来越复杂。在实际开发中，消息队列是非常重要的工具，它可以简化数据管理和通信操作。而 npm 包 node-messageq1 是一款非常优秀的消息队列工具，...

    3 年前
  • npm 包 charol 使用教程

    在前端开发中，有时我们需要对字符串进行操作，如截取、替换等。而 npm 包 charol 提供了强大的字符串处理功能，可以满足我们的需求。本文将详细介绍 npm 包 charol 的使用方法，帮助读者...

    3 年前
  • npm 包 big-uuid 使用教程

    前言 在前端开发中，如何生成唯一的标识符是一个常见的问题。我们可以使用 UUID(Universally Unique Identifier) 来解决这个问题。UUID 是一种由 32 个十六进制数或...

    3 年前
  • npm 包 @contant-core-ui/base 使用教程

    @contant-core-ui/base 是一个前端 UI 组件库，可以帮助开发者快速构建基础 UI 组件。在本篇文章中，我们将会介绍如何使用 @contant-core-ui/base 包。

    3 年前
  • 使用 React-rand-number 实现随机数字生成器

    React-rand-number 是一款可以在 React 应用中轻松生成随机数字的 npm 包。随机数字的生成在 Web 开发中是一个常见的需求，例如生成随机验证码、随机密码、随机数等等。

    3 年前
  • npm 包 racy 使用教程

    前言 在开发中，我们经常会遇到需要前端项目并发加载的情况，如多张图片的预加载、多个接口同时请求等。对于这些需求，npm 包 racy 可以帮助我们实现。 什么是 racy？ racy 是一个基于 Pr...

    3 年前
  • npm 包 workerize-proxy-loader 使用教程

    在前端开发中，经常会有需要在页面中执行一些耗时的计算任务。如果这些计算任务由主线程执行，很容易导致页面卡死，影响用户体验。而 Web Worker 技术可以将这些计算任务放到另一个线程中执行，从而不影...

    3 年前
  • npm 包 @kingjs/descriptor.nested.for-each 使用教程

    前言 在前端开发中，经常会使用配置对象和嵌套对象来存储数据。然而，对于这些对象进行遍历和操作时，往往需要写大量重复的代码，不仅浪费时间，也容易出错。在这种情况下，npm 包 @kingjs/descr...

    3 年前
  • npm包@kingjs/descriptor.nested.freeze使用教程

    简介 在前端开发中，我们时常需要操作对象的属性，对于中间件包装，类型转换，协议数据读写等模块，我们通常在创建对象时进行属性的初始化，并在后续过程中变更这些属性的值。

    3 年前

相关推荐

    暂无文章