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

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

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 — goto1

p_tul p_tul · Accepted Answer · 2020-02-26T05:49:44

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

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

1 Answers