Gatsby教程中GraphiQL无date字段，formatString对datePublished失效

字段不匹配的原因 #

不是GraphQL或Gatsby版本更新导致的差异——GraphQL的allMdx返回的frontmatter字段完全对应你本地MDX文件里写的frontmatter键值对。教程里的MDX文件frontmatter用的是title和date，而你自己的MDX文件里定义的是name和datePublished，所以GraphiQL里显示的是后者。

formatString无效的解决方法 #

formatString是Gatsby专为Date类型字段提供的格式化参数，如果你的datePublished被识别为字符串类型（比如MDX里写的是未被解析的文本日期），就无法使用这个参数。解决思路分两种：

方法1：自定义Schema将字段转为Date类型 #

在项目根目录的gatsby-node.js中添加Schema自定义配置，强制把datePublished识别为Date类型并启用日期格式化：

exports.createSchemaCustomization = ({ actions }) => {
  const { createTypes } = actions;
  const typeDefs = `
    type MdxFrontmatter {
      datePublished: Date @dateformat
    }
    type Mdx implements Node {
      frontmatter: MdxFrontmatter
    }
  `;
  createTypes(typeDefs);
};

配置完成后重启Gatsby开发服务，就能在GraphiQL里给datePublished添加formatString参数了：

query MyQuery {
  allMdx {
    nodes {
      frontmatter {
        datePublished(formatString: "YYYY-MM-DD")
        name
      }
    }
  }
}

方法2：前端手动格式化字符串日期 #

如果不想修改Schema，可以在获取到数据后，用前端日期库（比如date-fns、dayjs）来格式化字符串类型的datePublished：

// 示例用date-fns
import { format } from 'date-fns';

// 假设从GraphQL拿到的节点数据为node
const formattedDate = format(new Date(node.frontmatter.datePublished), 'yyyy-MM-dd');

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