如何在Gatsby的GraphQL中配置可选Sharp图片？

我之前也碰到过一模一样的情况，你当前的矛盾点在于：自定义Schema时把image设为File!虽然解决了空数组的构建问题，但Gatsby默认的文件解析逻辑被覆盖了，导致相对路径的图片无法被gatsby-transformer-sharp处理。要解决这个问题，我们需要自定义字段解析器，手动将Markdown frontmatter里的相对路径映射到对应的File节点，同时保留类型约束。

步骤1：调整Schema定义 #

首先，把Feature类型里的image字段改成File（去掉感叹号，允许为空，但我们会通过解析器确保有值时能正确映射），同时保持features数组的非空约束：

const path = require('path');

exports.createSchemaCustomization = ({ actions }) => {
  const { createTypes } = actions;
  const typeDefs = `
    type MarkdownRemark implements Node {
      frontmatter: Frontmatter
    }
    type Frontmatter {
      features: [Feature!]!
    }
    type Feature {
      title: String!
      description: String!
      image: File
    }
  `;
  createTypes(typeDefs);
};

步骤2：添加自定义解析器 #

接下来，使用createResolvers来手动解析Feature.image字段，把Markdown里的相对路径转换成Gatsby的File节点。这样既保证了类型正确，又能让gatsby-transformer-sharp生成childImageSharp：

exports.createResolvers = ({ createResolvers, getNode, context }) => {
  createResolvers({
    Feature: {
      image: {
        resolve: (source, args, ctx, info) => {
          // 如果没有图片路径直接返回null
          if (!source.image) return null;

          // 获取当前Markdown文件的节点，用来定位图片的相对路径
          const markdownNode = getNode(info.parent.parent.id);
          // 拼接出图片的绝对路径
          const imageAbsolutePath = path.join(
            path.dirname(markdownNode.absolutePath),
            source.image
          );

          // 在Gatsby的文件系统节点中查找对应文件
          return ctx.nodeModel.findOne({
            type: "File",
            query: {
              filter: { absolutePath: { eq: imageAbsolutePath } }
            }
          });
        }
      }
    }
  });
};

步骤3：验证查询与效果 #

你的GraphQL查询不需要改动，保持原来的写法即可：

export const query = graphql`
  query HomeQuery($path: String!) {
    markdownRemark(frontmatter: { path: { eq: $path } }) {
      html
      frontmatter {
        features {
          title
          description
          image {
            childImageSharp {
              fluid(maxWidth: 800) {
                ...GatsbyImageSharpFluid
              }
            }
          }
        }
      }
    }
  }
`;

现在两种场景都能正常工作：

• 当features数组为空时，Schema的[Feature!]!约束不会触发构建错误（空数组属于合法的非空数组）
• 当features里有图片时，自定义解析器会把相对路径映射到File节点，gatsby-transformer-sharp会自动生成childImageSharp，图片可以正常显示

为什么之前的写法不行？ #

当你把image声明为File!时，Gatsby会认为这个字段已经是一个File节点，但实际上Markdown里存储的是字符串路径，Gatsby默认的路径转File节点的逻辑只在没有自定义Schema时才会生效。通过自定义解析器，我们手动补上了这个转换过程，同时保留了类型的灵活性。

内容的提问来源于stack exchange，提问作者Joe Methven