在 Gatsby 中使用 graphQL 查询多个 JSON 文件答案

【问题标题】：Query multiple JSON files with graphQL in Gatsby在 Gatsby 中使用 graphQL 查询多个 JSON 文件
【发布时间】：2019-05-18 15:32:02
【问题描述】：

我正在尝试查询放在src/data 目录中的两个JSON 文件。我安装了gatsby-transformer-json 并将目录添加为源。

{
  resolve: `gatsby-source-filesystem`,
  options: {
    path: `${__dirname}/src/data/`
  }
}

然后我尝试了几种方法来构建 graphql 查询，但我只能成功查询我创建的第一个 json 文件 work_experiences.json，虽然我的第二个文件 skills.json 具有完全相同的结构

{
  "work_experiences": [
    {
      "body": "lorem ipsum",
      "title": "lorem ipsum",
      "role": "lorem",
      "dateBegin": "2015-10-01",
      "dateEnd": "2016-07-03",
      "companyUrl": "http://www.lorem.com",
      "workUrl": "/lorem/ipsum/"
    },
    ...

对 Skills.json 的查询总是返回 null

有没有办法查询这两个文件，还是我必须将所有内容合并到一个 data.json 文件中？

【问题讨论】：

我将这两个文件合并到一个 data.json 文件中，虽然感觉不对，但它似乎可以工作
您能否将技能的 json 文件添加到您的问题中？

标签： json reactjs graphql gatsby

【解决方案1】：

如果您在同一个根文件夹中有 2 个文件并且要查询，您将仅从单个节点获取数据，因为 dataJson 查询到单个文件。

或者你像这样使用allDataJson：

{
  allDataJson{
    edges{
      node{
        work_experiences{
          title
        }
        skills{
         name
        }
      }
    }
  }
}

在这种情况下，一个好的解决方案是将您的单对象 json 文件存储在单独的文件夹中，每个文件夹只有一个 json。

例如，您有一些Users 数据：

在您的 src/data 中创建一个 User 文件夹。
使用{ "name": "blabla" } 创建一个 index.json 文件。
查询您的数据。

像这样：

{
  userJson{
    name
  }
}

【讨论】：

非常详细的答案。恭喜。这将是我接受的答案！你为我节省了几个小时。

【解决方案2】：

@aymen 是正确的。然后，您可以将查询设置为调用多个单独的 JSON 文件：

export const pageQuery = graphql`
  query indexQuery {
    allSocialJson {
      edges {
        node {
          url
          type
        }
      }
    }
    allExperienceJson {
      edges {
        node {
          id
          company
          title
        }
      }
    }
    allCertificationsJson {
      edges {
        node {
          name
          id
          start
          end
          authority
        }
      }
    }
    allEducationJson {
      edges {
        node {
          id
          school
          program
        }
      }
    }
  }
`

【讨论】：

【解决方案3】：

我遇到了同样的问题，复制了@Aymen的方法。

我试图使用下面的两个插件（gatsby-source-filesystem 和 gatsby-transformer-json）将多个 json 文件加载到我的 gatsby 站点中。

这是我的gatsby-config.js 文件的设置方式：

 const path = require(`path`)

 module.exports = {
  siteMetadata: {
    title: "My Homepage",
  },
  plugins: [
    `gatsby-transformer-json`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `data`,
        path: path.join(__dirname, `data`),
      },
    },
  ],
}

首先，在我的数据文件夹中，我创建了单独的文件夹。
接下来，我将 index.json 文件添加到每个单独的文件夹中。项目文件结构如下：

src 
-- data 
---- folder1
------ index.json
---- folder2
------ index.json
---- folder3
------ index.json

然后，我可以通过这个单一查询访问所有 index.json 文件的数据：

query MyQuery {
  allIndexJson {
    edges {
      node {

      }      
    }    
  }
}

【讨论】：