当我觉得某个建筑是重的时候，我进行了一些调查，找到了各种各样的信息。

问题的代码

如果想要将调用Gatsby-image图像的代码组件化，可以这样写。

const BadImage = ({ imagePath }) => {
  const data = useStaticQuery(graphql`
    query {
      allFile(filter: { sourceInstanceName: { eq: "images" } }) {
        nodes {
          relativePath
          childImageSharp {
            fluid {
              ...GatsbyImageSharpFluid
            }
          }
        }
      }
    }
  `);

  const image = data.allFile.nodes.find(img => img.relativePath === imagePath);

  return <Image fluid={image.childImageSharp.fluid} />;
};

然而，如果这样写，每次调用该组件时都会调用图像文件夹中的所有图片，所以似乎会随着图像文件夹中的图片增加而变得更重。因此，建议编写获取真正需要的图片的查询。

那你准备怎么办呢？

如果有人问：“那我们需要重复编写多少遍相同的代码呢？”，使用GraphQL提供的Fragment即可解决这个问题。

export const getFluidImage = graphql`
  fragment getFluidImage on File {
    childImageSharp {
      fluid {
        ...GatsbyImageSharpFluid
      }
    }
  }
`;

示例代码

import { graphql } from 'gatsby';

export const getFluidImage = graphql`
  fragment getFluidImage on File {
    childImageSharp {
      fluid {
        ...GatsbyImageSharpFluid
      }
    }
  }
`;

const IndexPage: React.FC<any> = ({ data }) => (
  <div>
    <div>
      <Img fluid={data.image1.childImageSharp.fluid} />
      <Img fluid={data.image2.childImageSharp.fluid} />
    </div>
  </div>
);

export const query = graphql`
  query {
    image1: file(relativePath: { eq: "feelsbadman.png" }) {
      ...getFluidImage
    }
    image2: file(relativePath: { eq: "pase_zasetsu.png" }) {
      ...getFluidImage
    }
  }
`;

通过这样做，可以同时获取真正想要的图像，并尽量减少每个代码的量。

文献参考

• 5 Optimizations to Get Faster Gatsby Builds Today

• javascript – Reusable Gatsby-Image Component with dynamic image sources – Stack Overflow

An Introduction To Using Gatsby Image & Gatsby.js V2