使用Gatsby+GraphQL来加载JSON数据，并在React Bootstrap表格中显示

2 年 ago
宇, 华
3 minutes

使用Gatsby+GraphQL读取JSON数据，并在React bootstrap表格中显示

我有一个从Angular Material2的mat-table导出的JSON文件，但是发现将其手动复制到HTML的bootstrap Table中是不可能的，所以我在Gatsby中找到了一种方法，可以一次性加载并显示它。

用Gatsby + GraphQL从JSON文件读取数据
这篇文章的作者是Emma Bostian，她是一位在德国居住的美国人。她的Twitter上有10万名粉丝（令人惊讶）。

目标

手头有数百条数据的JSON文件如下。

/* Symptoms.json */
[
    {"症状名": "関節痛", "症状名（英語）": "Aching joints"},
    {"症状名": "筋肉痛", "症状名（英語）": "aching muscles"},
    {"症状名": "急性過興奮状態", "症状名（英語）": "Acute hyper excited state"},
・・・以下略・・・
]
image.png

将以下内容用中文本地化，只需要一个选项：
[HTML]

<Table striped bordered hover variant="dark" size="sm" responsive>
   <tbody>
     <th>症状名</th><th>症状名（英語）</th>
       <tr><td>関節痛</td><td>Aching joints</td></tr>
       <tr><td>筋肉痛</td><td>aching muscles</td></tr>
       <tr><td>悪寒</td><td>Chills</td></tr>
       <!--・・・以下略・・・-->
    </tbody>
</Table>

动态显示如何加载JSON。

总之，可以通过一个名为gatsby-transformer-json的插件来实现。

前提 – 只需要一个选项，用汉语来重新表达以下句子：

首要条件

・已创建了Gatsby项目
・已引入React bootstrap。参考：在Gatsby中引入React bootstrap和导航栏。

引入的方式

JSON文件的位置

在Gatsby项目中创建一个名为src/data/的文件夹。然后将JSON文件放在该文件夹下。在这里我放置了Symptoms.json文件。
由于Symptoms.json文件的键名是日语会有不便之处，所以我已经将它替换为了英语。

[
    {"SymptomNameJ": "関節痛", "SymptomNameE": "Aching joints"},
    {"SymptomNameJ": "筋肉痛", "SymptomNameE": "aching muscles"},
    {"SymptomNameJ": "急性過興奮状態", "SymptomNameE": "Acute hyper excited state"},
・・・略・・・
]
安装插件

安装gatsby-transformer-json和gatsby-source-filesystem。

$ yarn add gatsby-transformer-json gatsby-source-filesystem
在配置文件中进行设置

在gatsby-config.js文件中按照以下方式进行描述

// ・・・略・・・
      `gatsby-transformer-json`,
      {
        resolve: `gatsby-source-filesystem`,
        options: {
          name: `data`,
          path: `${__dirname}/src/data/`,
        },
      },
// ・・・略・・・

路径：`${__dirname}/src/data/`是为存放JSON文件而创建的文件夹。

制作组件

可以在index.js文件中进行，但在这里我们将在pages文件夹下创建Symptoms.js文件。
创建完后，首先需要导入StaticQuery和graphql，以便能够读取JSON数据，代码如下。

import { graphql, StaticQuery } from "gatsby"
描述查询属性

使用GraphQL来描述查询属性。

graphql
`query SymptomsQuery {
  allSymptomsJson {
   edges {
      node {
               SymptomNameJ
               SymptomNameE
           }
         }
     }
 }`

查询名称SymptomsQuery实际上是将Query与Symptoms这个组件名称随意地拼凑在一起的。我认为是任意的。

allSymptomsJson 是一个根据命名规则从Symptoms.json中获取的数据，因此它由 all + Symptoms + Json 组成（即 allSymptomsJson）。您可以在 http://localhost:8000/___graphql 上进行确认。

image.png
渲染

只需使用render={}进行渲染。代码如下所示。

            <StaticQuery
                query={graphql`
                   query WithdrawalSymptomsQuery {
                       allWithdrawalSymptomsJson {
                           edges {
                               node {
                                   SymptomNameJ
                                   SymptomNameE
                               }
                           }
                       }
                  }
               `}
                render={data => (
                    <>
                        <Table striped bordered hover variant="dark" size="sm" responsive>
                            <tbody>
                                <th>症状名</th><th>症状名（英語）</th>
                                {getSymptoms(data)}
                            </tbody>
                        </Table>
                    </>
                )}
            />

如你所见，在元素内写入所有内容。

在{getSymptoms(data)}这个部分，从JSON数据中读取，将表格的

[症状名][英语症状名]

作为数组输出。这个函数如下所示。Emma称之为Helper Function，但是是Helper函数吗？

function getSymptoms(data) {
    const SymptomsArray = [];
    data.allSymptomsJson.edges.forEach(item =>
        SymptomsArray.push(
            <tr>
                <td key={item.node.SymptomNameJ}>{item.node.SymptomNameJ}</td>
                <td key={item.node.SymptomNameE}>{item.node.SymptomNameE}</td>
            </tr>
        )
    );
    return SymptomsArray;
}

代码的全部内容 de

Symtomps.js 代码全文：

import React from "react"
import { graphql, StaticQuery } from "gatsby"
import { Container, Table } from 'react-bootstrap'

const Symptoms = () => (
    <Container fluid="md">
            <StaticQuery
                query={graphql`
                   query WithdrawalSymptomsQuery {
                       allWithdrawalSymptomsJson {
                           edges {
                               node {
                                   SymptomNameJ
                                   SymptomNameE
                               }
                           }
                       }
                  }
               `}
                render={data => (
                    <>
                        <Table striped bordered hover variant="dark" size="sm" responsive>
                            <tbody>
                                <th>症状名</th><th>症状名（英語）</th>
                                {getSymptoms(data)}
                            </tbody>
                        </Table>
                    </>
                )}
            />
    </Container>
function getSymptoms(data) {
    const SymptomsArray = [];
    data.allSymptomsJson.edges.forEach(item =>
        SymptomsArray.push(
            <tr>
                <td key={item.node.SymptomNameJ}>{item.node.SymptomNameJ}</td>
                <td key={item.node.SymptomNameE}>{item.node.SymptomNameE}</td>
            </tr>
        )
    );
    return SymptomsArray;
}

export default Symptoms

以上的内容。

这本书的宣传

《了不起的盖茨比》版本5>>>>修订2版

将前篇《用最新的Gatsby构建企业网站》和后篇《用最新的Gatsby和microCMS构建具有网站内搜索功能的企业网站》合并，创建以下示范网站：
→ https://yah-space.work

通过使用静态网站生成器Gatsby的最新版本5以及文件系统路由API，解释如何动态生成页面。此外，介绍版本5中的新功能《Slicy API》、《Script API》和《Head API》，并提供实现方法。还包括使用《Gatsby Functions》实现查询表单以及将网站上传至Gatsby Cloud的方法！

 

用最新的Gatsby 5和microCMS结合创建公司网站的操作步骤进行解释。使用Gatsby版本4中的新功能《Gatsby Functions》和《microCMS的q参数》来实现《网站内搜索功能》。此外，我们还会介绍如何自定义SEO组件并将microCMS的API显示在Twitter卡片中作为OGP标签的实现方法。

 

参考：使用Gatsby + GraphQL从JSON文件中读取数据

✖
广告
将在 10 秒后关闭
bannerAds