我如何通过GraphQL从JSON文件获取数据?

10

我有:

- 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文件中获取画廊名称列表? 我正在尝试编写:
export const IndexQuery = graphql`
  query IndexQuery {    
    mydata: file(name: { eq: "data" }, extension: { eq: "json" }) {
      allFile {
        gallery {
          name
        }
      }
    }
  }
`

但是它没有起作用。
1个回答

11
您的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运行。


常量{ mydata } = this.props.data.dataJson返回(<div> {mydata.gallery.forEach(value => alert(value.name))} </div>) - angry
执行 console.log(this.props.data.dataJson) 并检查返回的数据。在查询中不存在 mydata。尝试使用 const { gallery } = this.props.data.dataJson 并循环遍历它。 - Fabian Schultz
我们应该写dataJson,因为文件名是data.json还是目录名? - angry
是的,因为目录名称的原因。 - Fabian Schultz

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接