使用 Gatsby + GraphQL 从 JSON 文件读取数据

查询属性

渲染属性

GraphQL 命名法

更改默认的 gatsby-transformer-json 命名约定

目标：用于gatsby-transformer-json从本地 JSON 文件读取数据并在 React 组件中动态生成列表项。

用例：我有一个 Sidebar React 组件，它接收一个侧边栏列表项（对象）数组，并根据它们的数据动态生成列表项。我不想将所有侧边栏值都硬编码，因为这很快就会变得混乱。因此，我希望有一个 JSON 文件，可以在其中快速添加新的列表项并将其传递到 UI。

本博客假设您已经创建了一个 Gatsby 项目。您可以使用Gatsby CLI快速启动一个新的应用程序。我的 sidebar.js 组件将被导入到运行 CLI 命令后生成的 index.js 启动文件中。

1. 创建用于存储 JSON 数据的目录和 JSON 文件。我的 JSON 文件位于 中src/data/sidebarItems.json。

我的 JSON 数据具有以下结构：

1. 接下来安装gatsby-transformer-json和gatsby-source-filesystem。

npm install gatsby-transformer-json gatsby-source-filesystem --save

1. 在文件内部gatsby-config.js添加以下内容：

该path值将是包含 JSON 文件的文件夹的链接。

1. 接下来，打开你想要使用数据的组件。我的组件位于sidebar.js

首先，导入StaticQuery和graphql从gatsby。我们需要它们来访问 JSON 数据。

我们将使用 Gatsby 的静态查询来包装无状态的功能性 React 组件。

在元素内部<StaticQuery />，添加两个属性：query和render。

查询属性

查询属性的值将如下所示：

我们正在创建一个名为 的查询SidebarItemsQuery（您可以随意命名该查询；我选择将其命名为{dataReturned}Query）。返回的数据将是侧边栏项目，因此查询名称将是SidebarItemsQuery。

接下来是allSidebarItemsJson。您必须根据 JSON 文件名来命名它。由于我使用的是SidebarItems.json，因此它被称为allSidebarItemsJson。这是默认的命名约定，但是您可以在 内部进行更改gatsby-config.js（有关更多详细信息，请参阅最后的“更改默认 gatsby-transformer-json 命名约定”部分）。

其中，我们有edges、node，以及我们希望从查询中返回的值。就我而言，由于我创建了一个侧边栏，其中包含指向不同内容的链接列表，因此我有一个标签和一个链接（有关边和节点的高级定义，请参阅下面的“GraphQL 命名法”部分）。

渲染属性

现在我们有了查询，让我们定义 render 属性。此属性将接受一个参数：我们刚刚编写的查询的数据。它将返回我们希望无状态函数组件渲染的 JSX。

注意：你可以将 JSX 包裹在空括号中，作为React fragment<>...</>的简写。这样你就可以返回多个子组件，而无需在 DOM 上附加其他节点。

这与以下编写相同：

现在，我想迭代这些节点并<h1>为每个标签创建一个；它可能看起来像这样。我创建了一个getSidebarLabels辅助函数，它接收数据并对其进行迭代以创建三个<li>项目。

辅助函数如下：

正如我们所期望的，三个列表项被附加到 DOM。

以下是无状态功能组件的完整代码sidebar.js。

GraphQL 命名法

GraphQL使用图来表示数据。你可以将其想象成这样：

边：连接图中不同节点并表示关系的线。

节点：记录或数据。

我们以 Medium 这样的博客网站为例。在这个用例中，节点可以被认为是博客文章或用户。

我不是 GraphQL 专家；我还在学习！如果我的表述有误，欢迎在下方留言。

更改默认的 gatsby-transformer-json 命名约定

要更改 JSON 查询，请转到，并用下面的对象gatsby-config.js替换该行。"gatsby-transformer-json"

在选项对象内部，更新typeName键；这可以是任何字符串值。这里我们输入的是静态值Json，但需要注意的是，这只是一个字符串值，所以如果你愿意，也可以称之为 Cats 。

现在，在我们创建 GraphQL 查询的文件内（在我的情况下），使用引用查询中sidebar.js新命名的值。typeNameall{typeName}

现在您已经知道如何使用gatsby-transformer-json从本地 JSON 文件读取数据了。我写这篇博文主要是为了自己使用（以后可能需要参考），所以可能会有一些小错误。如果您发现任何错误，请在下面的评论区告诉我。:)