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

Question

我有：

- 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
        }
      }
    }
  }
`

但是没用。

Answer 1

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

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

然后在 page/layout 中使用它，例如：

this.props.data.dataJson.gallery

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

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

How can I get data from a json-file via GraphQL?

graphql

gatsby