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

时间:2018-03-13 09:25:54

标签: graphql gatsby

我有:

- 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 个答案:

答案 0 :(得分:5)

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