如何使用 GatsbyJS 和 GraphQL 查询和显示包含多个图像的文件夹答案

【问题标题】：How do you query and display a folder of multiple images using GatsbyJS and GraphQL如何使用 GatsbyJS 和 GraphQL 查询和显示包含多个图像的文件夹
【发布时间】：2020-03-14 08:18:26
【问题描述】：

我正在尝试查询文件夹中的所有图像，并将它们显示在带有 tailwindCSS 和 gatsby-image 的卡片网格中。我已经能够查询和显示一个图像，但是当我尝试使用图像文件夹执行此操作时，即使查询在 GraphQL 资源管理器中有效，我也会收到错误“TypeError: Cannot read property 'edges' of undefined” .我已经阅读了文档，查看了其他教程，并且现在尝试了很多不同的方法，但无法弄清楚出了什么问题。任何帮助是极大的赞赏！

import React from "react";
import { graphql } from "gatsby";
import Img from "gatsby-image";
import Layout from "../components/layout";
import SEO from "../components/seo";

const ArtPage = props => (
    <Layout>
      <SEO
        keywords={[`art`, `paint`, `draw`]}
        title="Art"
      />
      <div class="flex flex-wrap mt-2 mx-1">
        {props.artImages.edges.map(img => (
          <div class="w-full md:w-1/2 lg:w-1/2 px-2 my-2">
            <div className="rounded overflow-hidden shadow-lg">
              <Img
                className="w-full"
                fluid={img.node.childImageSharp.fluid}
              />
            </div>
          </div>
        ))}
      </div> 
    </Layout>
)

export default ArtPage;

export const query = graphql`
  query artImages {
    allFile(filter: { relativePath: { regex: "/art/.*.png/" } } ) 
    {
      edges {
        node {
          relativePath
          name
          childImageSharp {
            fluid(maxWidth: 500) {
              ...GatsbyImageSharpFluid
            }
          }
        }
      }
    } 
  }
`;

【问题讨论】：

标签： reactjs graphql gatsby tailwind-css gatsby-image

【解决方案1】：

我使用的是 props.artImages 而不是 props.data.artImages oooooooops

【讨论】：

【解决方案2】：

调试这样的问题总是很困难的。由于您声明您的查询在 GraphiQL 中是正确的，因此您可能在引用 GraphQL 树中的正确属性时犯了错误。 undefined 表示您引用了一个不存在的对象。

调试这个问题的秘密武器其实是console.log(graphQlobject)。在浏览器中打印对象并尝试访问属性，直到正确为止。

我会给你我在项目中使用的 HeaderSupplier 组件，并用 cmets 引用重要的部分：

import React from "react";
import { graphql, useStaticQuery } from "gatsby";
import GatsbyImage from "gatsby-image";
import styled from "styled-components";
import { pickRandomly } from "../util/utilityFunctions";

/**
 * Returns one random image header.
 * Uses GatsbyImage and GraphQL to load images.
 * @see https://www.orangejellyfish.com/blog/a-comprehensive-guide-to-images-in-gatsby/
 */
const HeaderSupplier = () => {
  const { allFile } = useStaticQuery(graphql`
    query {
      allFile(filter: {
        extension: {regex: "/(jpg)|(jpeg)|(png)/"}, 
        sourceInstanceName: {eq: "headers"}}) 
        // filter by sourceInstanceName, see the gatsby-config.js, 
        // this way you get exactly the files you need without complicated regex statements
      {
        edges {
          node {
            childImageSharp {
              fluid(maxWidth: 150, quality: 100) {
                originalName
                ...GatsbyImageSharpFluid
              }
            }
          }
        }
      }
    }`);

  // use console.log for debugging and correctly navigating the graphQL tree
  console.log(allFile);

  const header = pickRandomly(allFile.edges); 
  const { fluid } = header.node.childImageSharp;
  // make sure you reference the correct objects
  // if you get undefined you made a mistake navigating the GraphQL tree

  return (
      <GatsbyImage fluid={fluid} alt={fluid.originalName} />
  );
};

export default HeaderSupplier;

gatsby-config.js中的源实例：

{
      resolve: "gatsby-source-filesystem",
      options: {
        path: `${__dirname}/src/components/library/headers`,
        name: "headers",
      },

【讨论】：