时间戳

首页 > 解决方案 > 如何创建模式自定义以使用 gatsby 博客中的可选字段“featureImage”

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

问题描述

我正在制作一个 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'”终端消息：错误 getNodeAndSavePathDependency failed for node id: undefined as it was not found in cache

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

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

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

标签： javascriptreactjsgraphqlgatsby

解决方案

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

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

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

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

其他有用的线程：

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

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

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

PS：很遗憾 CodeSandbox 问题，感谢您的尝试

推荐阅读