如何创建模式自定义以使用来自 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
              }
            }
          }
        }
      }
    }
  }
`;

盖茨比-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'” 终端消息：节点 id 的错误 getNodeAndSavePathDependency 失败：未定义，因为在缓存中找不到它

警告您不能将 childImageSharp 与 undefined.undefined 一起使用 — 请改用 publicURL。此文件中查询的 childImageSharp 部分将 return 为空：未定义

浏览器控制台：警告：道具类型失败：道具 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

Browser console: Warning: Failed prop type: The prop image is marked as required in GatsbyImage, but its value is undefined.

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

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

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

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

How to create schema customization to use optional field "featureImage" from gatsby blog

javascript

reactjs

graphql

gatsby