Graphql 查询不返回 gatsby-image 的图像，但适用于 graphiQL答案

【问题标题】：Graphql query does not return image for gatsby-image but works in graphiQLGraphql 查询不返回 gatsby-image 的图像，但适用于 graphiQL
【发布时间】：2020-06-09 01:27:31
【问题描述】：

我正在构建一个包含多个 gatsby-source-filesystem 实例的博客。

我正在尝试在页面上使用 gatsby-image，但它只是返回： TypeError: Cannot read property 'fixed' of undefined

我要查询的图片位于 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 是一个数组，所以你不能做data.allImageSharp.edges.node。相反，您需要做的是从edges 数组中获取您想要的项目，然后对其执行node.fixed。像下面这样的东西会起作用：data.allImageSharp.edges[0].node.fixed
当然！这样就解决了。谢谢。

标签： graphql gatsby gatsby-image

【解决方案1】：

data.alImageSharp.edges 是一个数组，所以你不能做data.allImageSharp.edges.node。相反，您需要做的是从edges 数组中获取您想要的项目，然后对其执行node.fixed。像下面这样的东西会起作用：data.allImageSharp.edges[0].node.fixed

信用 - goto1

【讨论】：