Graphql query does not return image for gatsby-image but works in graphiQL - graphql

Question

I am building a blog with multiple gatsby-source-filesystem instances.
I am trying to use gatsby-image on a page but it simply returns:
TypeError: Cannot read property 'fixed' of undefined
The image I'm trying to query is located at src/images
spirits.js
import React from "react"
import { graphql } from "gatsby"
import Img from 'gatsby-image'
import Layout from "../components/layout"
import SEO from "../components/seo"
import Paper from '../components/paper'
const SpiritsPage = ({data}) => (
<Layout>
<SEO title="Spirits" />
<Paper>
<h1>Spirits</h1>
<p>This section is still under construction.</p>
<Img fixed={data.allImageSharp.edges.node.fixed} alt />
</Paper>
</Layout>
)
export const query = graphql`
query {
allImageSharp(filter: {fluid: {originalName: {eq: "australia.png"}}}) {
edges {
node {
fixed {
...GatsbyImageSharpFixed
}
}
}
}
}
`
export default SpiritsPage
gatsby-config.js
{
resolve: `gatsby-source-filesystem`,
options: {
name: `distilleries`,
path: `${__dirname}/content/distilleries`,
},
},
{
resolve: `gatsby-source-filesystem`,
options: {
name: `images`,
path: `${__dirname}/src/images`,
},
},
{
resolve: `gatsby-source-filesystem`,
options: {
name: `posts`,
path: `${__dirname}/content/posts`
},
},
`gatsby-transformer-sharp`,
`gatsby-plugin-sharp`,

Answer 1

data.alImageSharp.edges is an array, so you can't do data.allImageSharp.edges.node. Instead, what you need to do is grab the item you want from the edges array and then do node.fixed on it. Something like the following would work: data.allImageSharp.edges[0].node.fixed
credit – goto1