Question

我正在尝试查询放置在JSON目录中的两个src/data文件。我安装了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文件中？

Answer 1

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

或者您像这样使用allDataJson：

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

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

例如，您有一些Users数据：

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

赞：

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

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

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

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

query MyQuery {
  allIndexJson {
    edges {
      node {

      }      
    }    
  }
}

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

3 个答案: