无法查询allMarkdownRemark graphql上的字段

Question

目标

嗨。我有一个Gatsby网站，我正在使用gatsby-transformer-remark插件将博客目录中的博客标记文件加载到GraphQL中，以便在我的网站上显示。我已经查看了文档和示例代码，以了解如何为每个页面创建一个插件，以便在gatsby-node.js文件中可以使用该插件动态创建页面。

问题

当我尝试访问GraphiQL中的fields { slug }属性时，我得到了以下错误：message": "Cannot query field \"fields\" on type \"MarkdownRemark\"."我已经检查了我的设置几次，我认为一切似乎都很好，所以我不能100%确定我错过了什么，因为没有这些字段。我可以访问其他信息，如markdown文件的原始内容和frontmatter数据，但不能访问字段。

代码

在我的gatsby-config.js插件中，我对源文件系统和remark插件进行了以下设置

    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `blog`,
        path: `${__dirname}/blog`,
      },
    },
    {
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [
          {
            resolve: `gatsby-remark-images`,
            options: {
              maxWidth: 960,
            },
          },
          `gatsby-remark-prismjs`,
          `gatsby-remark-copy-linked-files`,
        ],
      },
    },

在GraphiQL中，我运行以下查询来复制错误

query {
  allMarkdownRemark(
          sort: { fields: [frontmatter___date], order: DESC }
          limit: 1000
        ) {
    edges {
      node {
        fields {
          slug
        }
        frontmatter {
          title
        }
      }
    }
  }
}

Answer 1

正如您所看到的，slug字段不是frontmatter的子字段(如果您使用原始的markdown，则本机应该如此)。要使slug作为field的子级可用，需要在gatsby-node.js中添加以下代码片段

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

exports.onCreateNode = ({ node, getNode, actions }) => {
  const { createNodeField } = actions
  
  if (node.internal.type === `MarkdownRemark`) {
    const slug = createFilePath({ node, getNode, basePath: `pages` })
    createNodeField({
      node,
      name: `slug`,
      value: slug,
    })
  }
}

通过使用Gatsby API添加此配置，您将允许createNodeField和推断出的GraphQL模式在由其他插件创建的节点上创建额外的字段，方法是告诉Gatsby，如果节点类型为markdown，则基于slug的frontmatter值创建一个slug字段。

您可以在Gatsby's docs中查看更多信息。