使用gatsby-source-medium集成Medium文章时缩略图无法显示的问题排查

看起来你在第一次使用Gatsby+GraphQL时遇到了几个典型的问题，我来一步步帮你排查和修复：

1. 父组件中缺失文章列表的遍历逻辑 #

首先看你的BlogPost组件，你已经通过useStaticQuery获取了所有Medium文章的数组blogs，但你直接返回单个<Blog />组件，没有遍历数组。这会导致要么没有内容渲染，要么报错（因为blog变量未定义）。

修复后的BlogPost组件：

const BlogPost = () => { 
  const blogMediumQueryData = useStaticQuery(graphql` 
    query Medium { 
      allMediumPost(sort: { fields: [createdAt], order: DESC }) { 
        edges { 
          node { 
            id 
            title 
            uniqueSlug 
            createdAt(formatString: "MMM YYYY") 
            virtuals { 
              previewImage { 
                imageId 
              } 
            } 
            author { 
              name 
            } 
          } 
        } 
      } 
    } 
  `) 
  const blogs = blogMediumQueryData.allMediumPost.edges 

  // 遍历所有文章节点，渲染每个Blog组件
  return ( 
    <div className="blog-posts-grid">
      {blogs.map(({ node: blog }) => (
        <Blog 
          key={blog.id} // 必须添加唯一key
          imageId={blog.virtuals.previewImage?.imageId} 
          title={blog.title} 
          date={blog.createdAt} 
          author={blog.author.name} 
          slug={blog.uniqueSlug} 
        />
      ))}
    </div>
  )
}

2. Medium的imageId不能直接给Gatsby Image使用 #

你拿到的imageId只是Medium图片的唯一标识，不是Gatsby Image组件需要的经过优化的图片数据。Gatsby的gatsby-image（或者新版的gatsby-plugin-image）需要的是经过gatsby-plugin-sharp和gatsby-transformer-sharp处理后的fluid或fixed格式数据。

解决方案：把Medium图片作为远程文件导入Gatsby #

我们需要在gatsby-node.js中添加逻辑，把Medium的图片URL转换成Gatsby可处理的文件节点：

首先安装必要依赖（如果还没装）：

npm install gatsby-source-filesystem gatsby-plugin-sharp gatsby-transformer-sharp

然后在gatsby-node.js中添加：

const { createRemoteFileNode } = require(`gatsby-source-filesystem`);

exports.onCreateNode = async ({ node, actions, createNodeId, getCache }) => {
  const { createNode } = actions;

  // 只处理MediumPost类型的节点
  if (node.internal.type === `MediumPost`) {
    const imageId = node.virtuals?.previewImage?.imageId;
    if (imageId) {
      // 拼接Medium的图片URL（这里用max/1200的尺寸，你可以调整）
      const imageUrl = `https://miro.medium.com/max/1200/${imageId}`;
      
      // 创建远程文件节点
      const fileNode = await createRemoteFileNode({
        url: imageUrl,
        parentNodeId: node.id,
        createNodeId,
        getCache,
      });

      // 将图片节点关联到MediumPost节点，方便后续查询
      if (fileNode) {
        node.featuredImage___NODE = fileNode.id;
      }
    }
  }
};

更新GraphQL查询以获取优化后的图片数据 #

修改你的查询，获取关联的图片fluid数据：

query Medium { 
  allMediumPost(sort: { fields: [createdAt], order: DESC }) { 
    edges { 
      node { 
        id 
        title 
        uniqueSlug 
        createdAt(formatString: "MMM YYYY") 
        author { 
          name 
        }
        # 获取处理后的图片fluid数据
        featuredImage {
          childImageSharp {
            fluid(maxWidth: 1200) {
              ...GatsbyImageSharpFluid
            }
          }
        }
      } 
    } 
  } 
}

然后在BlogPost中传递fluid数据给子组件：

<Blog 
  key={blog.id}
  imageFluid={blog.featuredImage?.childImageSharp?.fluid} 
  title={blog.title} 
  date={blog.createdAt} 
  author={blog.author.name} 
  slug={blog.uniqueSlug} 
/>

3. 子组件Blog的props问题 #

你的Blog组件中使用了postUrl、title等变量，但没有在组件参数中解构这些props，会导致变量未定义。同时要注意target='blank'应该是target='_blank'（下划线不能少）。

修复后的Blog组件：

import React from "react" 
import { Link } from "gatsby" 
import Image from "../elements/image" 

const Blog = ({ imageFluid, title, date, author, slug }) => { 
  // 生成Medium文章的完整链接
  const postUrl = `https://medium.com/@${author}/${slug}`;

  return ( 
    <div className="content-block"> 
      <div className="post-thubnail"> 
        {imageFluid && ( 
          <Link to={postUrl} target='_blank' rel="noopener noreferrer">
            <Image fluid={imageFluid} alt={title} /> 
          </Link> 
        )} 
      </div>
      {/* 补充文章信息展示 */}
      <h3 className="post-title">{title}</h3>
      <p className="post-meta">By {author} | {date}</p>
    </div> 
  ) 
} 
export default Blog

4. Image组件（NonStretchedImage）的逻辑优化 #

你的图片组件中对props的处理有点混乱，我们简化一下，确保正确传递fluid和其他参数：

import React from "react"; 
import Img from "gatsby-image"; 

const NonStretchedImage = ({ fluid, align, style, alt }) => { 
  // 处理对齐样式
  let alignment; 
  if(align === 'right'){ 
    alignment = '0 0 0 auto' 
  } else if(align === 'left'){ 
    alignment = '0 auto 0 0' 
  } else { 
    alignment = '0 auto' 
  } 

  const imageStyle = {
    ...style,
    maxWidth: fluid?.presentationWidth || '100%',
    margin: alignment,
    aspectRatio: 1, // 保持1:1比例
  };

  return <Img fluid={fluid} style={imageStyle} alt={alt} /> 
} 

export default NonStretchedImage;

最后检查gatsby-config.js的插件配置 #

确保你已经添加了必要的插件：

module.exports = {
  plugins: [
    `gatsby-plugin-sharp`,
    `gatsby-transformer-sharp`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: `${__dirname}/src/images/`,
      },
    },
    // 你的Medium源插件
    {
      resolve: `gatsby-source-medium`,
      options: {
        username: `你的Medium用户名`,
      },
    },
  ],
}

完成这些修改后，重启Gatsby开发服务器，你的Medium文章图片应该就能正常显示了！

内容的提问来源于stack exchange，提问作者Ayesh Nipun