如何创建模式自定义以使用 gatsby 博客中的可选字段“featureImage”

Question

我正在制作一个 Gatsby 博客作为一个副项目。

我想在 mdx frontmatter 中使用“featureImage”可选字段。

我尝试根据错误信息参考https://www.gatsbyjs.com/docs/reference/graphql-data-layer/schema-customization#creating-type-definitions文档，但是很难理解。

这是我的代码的一部分。

index.js

import React, { useEffect } from "react";
import { graphql } from "gatsby";
import { App, ContentCard, TagsNavi, User } from "../components";
import { ContentWrapper } from "../elements";
import { useDispatch, useTag } from "../store/StoreContext";
import { ALL, SET_TAG, TAG } from "../constants";

const IndexPage = ({ location, data }) => {
  const {
    allMdx: { edges },
  } = data;

  const tag = useTag();
  const dispatch = useDispatch();

  useEffect(() => {
    const tagName = new URLSearchParams(location.search).get(TAG);
    dispatch({ type: SET_TAG, tag: tagName || ALL });
  }, [dispatch, location.search]);

  return (
    <App title="Home">
      <div>
        <ContentWrapper>
          <User />
          <TagsNavi />
          {edges
            .filter(
              (edge) => edge.node.frontmatter.tags.includes(tag) || tag === ALL
            )
            .map((edge) => {
              const { node } = edge;
              return <ContentCard key={node.slug} {...node} />;
            })}
        </ContentWrapper>
      </div>
    </App>
  );
};

export default IndexPage;

export const pageQuery = graphql`
  query AllPostsQuery {
    allMdx(sort: { fields: frontmatter___date, order: DESC }) {
      edges {
        node {
          slug
          excerpt(pruneLength: 140, truncate: true)
          frontmatter {
            date(formatString: "MMMM DD, YYYY")
            tags
            title
            featureImage {
              childImageSharp {
                gatsbyImageData
              }
            }
          }
        }
      }
    }
  }
`;

gatsby-node.js

exports.createSchemaCustomization = ({ actions }) => {
  const { createTypes } = actions;
  const typeDefs = `
    type MdxFrontmatter implements Node {
      featureImage: File
    }
  `;
  createTypes(typeDefs);
};

我试过这个，当 featureImage 不存在时它可以工作。 但是如果我有 featureImage 就不行了。

如何创建我想要的功能？请帮帮我。

我英语不好，所以我使用翻译，所以我的话可能有点奇怪。对不起。

---

Codesandbox 地址在这里。 https://codesandbox.io/s/gatsby-starter-ki-demo-8fyty?file=/gatsby-node.js

在本地测试时， GraphiQL 操场输出：“无法读取未定义的属性‘contentDigest’” 终端消息：错误 getNodeAndSavePathDependency failed for node id: undefined as it was not found in cache

警告您不能将 childImageSharp 与 undefined.undefined 一起使用 - 请改用 publicURL。此文件中查询的 childImageSharp 部分将返回 null： 未定义

浏览器控制台：警告：道具类型失败：道具image在GatsbyImage中标记为必填，但其值为undefined。

[gatsby-plugin-image] 缺少图片道具

Answer 1

您可能会发现这个GitHub thread 很有见地。按照它，尝试使用：

exports.createSchemaCustomization = ({ actions }) => {
  const { createTypes } = actions

  createTypes(`
    type Mdx implements Node {
      frontmatter: MdxFrontmatter!
    }
    type MdxFrontmatter {
      featuredImage: File @fileByRelativePath
    }
  `)
}

我在您的实现中假设的问题是 Gatsby 没有内部节点来处理您的图像，因此解析器找不到创建 childImageSharp 等的路径。这就是输出为 undefined 的原因。

其他有用的话题：

• https://github.com/gatsbyjs/gatsby/issues/21426

---

浏览器控制台：警告：道具类型失败：道具image 已标记 GatsbyImage 中要求的，但其值为undefined。

这是因为你试图渲染 GatsbyImage 是否存在，所以你没有传递任何 image 属性。您没有共享组件中的逻辑，而是添加了一个简单的三元条件，例如：

{data.someNode.featuredImage && <GatsbyImage image={data.someNode.featuredImage} /> }

P.S：很遗憾 CodeSandbox 的问题，感谢您的尝试