如何通过 GraphQL 从 json 文件中获取数据？

Posted 2023-03-08

【中文标题】如何通过 GraphQL 从 json 文件中获取数据？

【英文标题】：How can I get data from a json-file via GraphQL?

【发布时间】：2018-08-21 11:45:33

【问题描述】：

我有：

- src
  - data
    - data.json

data.json:

"gallery": [
    "name":...
    "name":.. ...

gatsby-config.js 包含：

`gatsby-transformer-json`,

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

如何通过 GraphQL 查询从此 json 文件中获取 gallery.names 的列表？ 我正在尝试写：

export const IndexQuery = graphql`
  query IndexQuery     
    mydata: file(name:  eq: "data" , extension:  eq: "json" ) 
      allFile 
        gallery 
          name
        
      
    
  
`

但它不起作用。

【参考方案1】：

您的 GraphQL 查询需要稍作调整。 gatsby-transformer-json 负责所有解析，因此您无需担心查询中的 gatsby-source-filesystem：

export const IndexQuery = graphql`
  query IndexQuery 
    dataJson 
      gallery 
        name
      
    
  
`;

然后在页面/布局中使用它，例如：

this.props.data.dataJson.gallery

要调试您的 GraphQL 查询，使用内置的 GraphiQL 会很有帮助，它应该在 http://localhost:8000/___graphql 运行。

【讨论】：

const mydata = this.props.data.dataJson return ( mydata.gallery.forEach(value => alert(value.name)) )跨度>

执行console.log(this.props.data.dataJson) 并检查您收到的数据。 mydata 在查询中不存在。尝试 const gallery = this.props.data.dataJson 并循环遍历它。

我们应该写dataJson，因为文件名是data.json还是目录名？

是的，因为目录名。