Gatsby配置gatsby-source-filesystem后allDucks查询为空如何处理

为什么会生成空的allDucks字段 #

gatsby-source-filesystem原生仅会生成File类型的节点，你配置中填写的name: "Duck"仅作为标记赋值给对应路径生成的File节点的sourceInstanceName属性，不会主动生成Duck类型的节点。你在GraphiQL中看到的allDucks字段，是项目内引入的自动集合生成类插件，或是项目已有的自定义Gatsby Schema逻辑生成的，因为没有配套的节点映射逻辑把目标路径下的文章内容关联到Duck类型，所以查询结果为空。

如何通过allDucks查询到目标路径的文章 #

有两种实现方案可选：

方案1：自定义节点创建逻辑生成Duck类型节点 #

在项目根目录的gatsby-node.js文件中添加如下代码，将对应路径下的MarkdownRemark节点转为Duck类型节点：

exports.onCreateNode = ({ node, actions, getNode, createNodeId, createContentDigest }) => {
  const { createNode } = actions
  // 筛选来源为Duck实例的Markdown文件对应的MarkdownRemark节点
  if (node.internal.type === "MarkdownRemark" && node.parent) {
    const parentFileNode = getNode(node.parent)
    if (parentFileNode.sourceInstanceName === "Duck") {
      const duckNode = {
        // 可根据需求自定义字段，这里直接继承MarkdownRemark的所有属性
        ...node,
        id: createNodeId(`Duck-${node.id}`),
        parent: node.id,
        internal: {
          type: "Duck",
          contentDigest: createContentDigest(node)
        }
      }
      createNode(duckNode)
    }
  }
}

添加后重启Gatsby开发服务，allDucks即可返回对应路径下的所有文章内容，字段和原MarkdownRemark完全兼容。

方案2：直接过滤allMarkdownRemark实现相同效果（无额外代码） #

如果不需要强制使用allDucks字段，可直接在查询allMarkdownRemark时通过父节点的sourceInstanceName过滤，效果完全一致：

query GetDuckPosts {
  allMarkdownRemark(filter: { parent: { sourceInstanceName: { eq: "Duck" } } }) {
    nodes {
      frontmatter {
        title
        date
      }
      html
      excerpt
    }
  }
}

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