GatsbyJs自定义Posts schema与本地markdown数据源关联问题咨询

你自定义的Posts节点仅声明了字段结构，没有生成对应实体节点，所以无法查询到数据。allMarkdownRemark能返回结果，是因为gatsby-transformer-remark插件默认将markdown文件转成了MarkdownRemark类型的节点，你需要将这部分数据和Posts类型做关联，有两种常用实现方案：

方案1：直接修改transformer-remark配置（最简便） #

直接通过gatsby-transformer-remark的typeName配置，将你指定目录下的markdown文件直接生成为Posts类型节点，无需额外写节点创建逻辑：
修改gatsby-config.js中gatsby-transformer-remark的配置：

{
  resolve: `gatsby-transformer-remark`,
  options: {
    // 匹配sourceInstanceName为Posts的markdown文件，生成Posts类型节点
    typeName: ({ node }) => node.sourceInstanceName === 'Posts' ? 'Posts' : 'MarkdownRemark',
    // 保留你原有其他remark配置即可
    plugins: []
  }
}

配置完成后，你之前写的Posts类型结构定义可以保留，用来固定字段结构避免自动推断异常。

方案2：手动创建Posts节点 #

如果你需要额外的自定义逻辑，可以在gatsby-node.js中通过sourceNodes钩子主动查询MarkdownRemark节点，批量生成Posts节点：

exports.sourceNodes = async ({ actions, createNodeId, createContentDigest, graphql }) => {
  const { createNode } = actions

  // 查询所有markdown解析后的节点
  const queryResult = await graphql(`
    query {
      allMarkdownRemark {
        nodes {
          html
          rawMarkdownBody
          fileAbsolutePath
        }
      }
    }
  `)

  // 遍历生成Posts节点
  queryResult.data.allMarkdownRemark.nodes.forEach(markdownNode => {
    createNode({
      // 匹配你定义的Posts字段
      html: markdownNode.html,
      rawMarkdownBody: markdownNode.rawMarkdownBody,
      fileAbsolutePath: markdownNode.fileAbsolutePath,
      // Gatsby节点必填元数据
      id: createNodeId(`post-${markdownNode.fileAbsolutePath}`),
      parent: null,
      children: [],
      internal: {
        type: 'Posts',
        contentDigest: createContentDigest(markdownNode)
      }
    })
  })
}

生效操作 #

修改完代码后执行以下命令重启服务，清空旧缓存避免异常：

gatsby clean && gatsby develop

重启后打开GraphQL playground即可正常查询allPosts接口获取数据。

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