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

标签 json reactjs graphql gatsby

我正在尝试查询放在 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 enter image description here enter image description here

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

最佳答案

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

或者你像这样使用allDataJson:

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

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

例如,您有一些 Users 数据:

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

像这样:

{
  userJson{
    name
  }
}

关于json - 在 Gatsby 中使用 graphQL 查询多个 JSON 文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53829238/

相关文章:

json - 如何在Golang上的RESTful api中返回没有转义字符串的Json数据

reactjs - webpack 和 sass-loader 文件导入顺序

ios - 编码的 nsdata utf8 json,在 ios 中带有重音字符

json - 从 Groovy 中的 URL 解析 JSON 对象

ios - React Native map 上的标记单击事件在 React iOS 中不起作用

javascript - 在 react 表单输入中键入会导致焦点丢失并重新渲染

graphql - 您如何处理需要来自 AppSync/GraphQL 中的多个数据源的连接数据的列表?

GraphQL:嵌套查询与根查询

javascript - 如何在 TypeScript 中修复 "Initializer provides no value for this binding element and the binding element has no default value"?

jquery - 在 jQuery 中解析 JSON 对象并创建下拉菜单