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

Question

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

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

然后，我尝试了几种方法来构建graphql查询，但是我只能成功地查询我创建的第一个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文件中？

Answer 1

如果您在同一根文件夹中有两个文件，并且要进行查询，则只能从单个节点获取数据，因为dataJson会查询单个文件。

或者像这样使用allDataJson：

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

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

例如，您有一些Users数据：

在src/data.

• create中创建一个包含{ "name": "blabla" }.

• query
• 数据的User文件夹。

如下所示：

{
  userJson{
    name
  }
}

Answer 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
        }
      }
    }
  }
`

Answer 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`),
      },
    },
  ],
}

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

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

1. 然后，我可以使用以下单个查询访问我所有index.json文件的数据：

query MyQuery {
  allIndexJson {
    edges {
      node {

      }      
    }    
  }
}