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

Question

I have:

- src
  - data
    - data.json

data.json:

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

gatsby-config.js contains:

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

How can I get list of gallery.names from this json-file via GraphQL query? I'm trying to write:

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

but it doesn't work.

Answer 1

Your GraphQL query needs a little tweaking. The gatsby-transformer-json takes care of all the resolving, so you don't need to worry about gatsby-source-filesystem inside the query:

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

Then use it inside the page/layout like:

this.props.data.dataJson.gallery

To debug your GraphQL queries it’s helpful to use the built-in GraphiQL, which should run at http://localhost:8000/___graphql.