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

Posted 2023-03-08

【中文标题】在 Gatsby 中使用 graphQL 查询多个 JSON 文件

【英文标题】：Query multiple JSON files with graphQL in Gatsby

【发布时间】：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 文件添加到您的问题中？

【参考方案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