Как вы запрашиваете и отображаете папку из нескольких изображений с помощью GatsbyJS и GraphQL

Я пытаюсь запросить все изображения в папке и отобразить их в карточной сетке с помощью tailwindCSS и gatsby-image. Мне удалось запросить и отобразить одно изображение, но когда я пытаюсь сделать это с помощью папки изображений, я получаю сообщение об ошибке "TypeError: Cannot read property 'edge' of undefined", хотя запрос работает в проводнике GraphQL.. Я читал документацию, смотрел другие руководства, пробовал много разных способов сейчас и не могу понять, что не так. Любая помощь приветствуется!

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
            }
          }
        }
      }
    } 
  }
`;
Источник

2 ответа

Отладить такую ​​проблему всегда сложно. Поскольку вы заявили, что ваш запрос в GraphiQL верен, вы, вероятно, допустили ошибку, ссылаясь на правильные атрибуты в дереве GraphQL.undefined это индикатор того, что вы ссылаетесь на несуществующий объект.

Секретное оружие для устранения этой проблемы на самом деле console.log(graphQlobject). Распечатайте объект в своем браузере и попытайтесь получить доступ к атрибутам, пока не получите правильное решение.

Я дам вам свой компонент HeaderSupplier, который я использую в своем проекте, и буду ссылаться на важные моменты с комментариями:

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",
      },
Источник

Я использовал props.artImages вместо props.data.artImages ooooooops

Источник
Другие вопросы по тегам