Gatsby Remark 插件：创建的节点对 GraphIQL 可见，但在 Gatsby 页面上的查询返回 null

Posted 2023-03-08

【中文标题】Gatsby Remark 插件：创建的节点对 GraphIQL 可见，但在 Gatsby 页面上的查询返回 null

【英文标题】：Gatsby Remark plugin: Created nodes visible to GraphIQL but queries on Gatsby pages return null

【发布时间】：2020-05-22 22:13:58

【问题描述】：

我正在为 gatsby-transformer-remark 开发一个插件。在我的插件中，我从 Remark 转换器中获取数据并创建一个新类型的 graphql 节点。当我启动站点并在http://localhost:8000/___graphql 打开 GraphIQL 时，我可以看到我的插件的新节点及其数据。但是，当我尝试在 Gatsby 页面组件中访问该节点的数据时，graphql 查询为该节点类型返回 null。为什么数据没有出现在我页面的graphql查询中？我不能在 Remark 插件中创建新的 graphql 节点吗？ Remark gatsby 插件 API 提供了创建节点的必要方法。

我在这个链接上有一个最小的复制回购。运行它和查看问题的说明在自述文件中。

https://github.com/timothymcmackin/test-create-nodes

我使用createNode 方法在plugins/gatsby-remark-internal-toc/index.js 中创建graphQL 节点：

  if (headings.length > 0) 
    const  createNode  = actions;

    const headingNode = 
      headings: headings,
      path: markdownNode.frontmatter.path,
      id: createNodeId(`$markdownNode.frontmatter.path.$markdownNode.frontmatter.title`),
      children: [],
      internal: 
        description: `Headings and links for $markdownNode.fileAbsolutePath`,
        type: "topicInternalHeadings",
        contentDigest: createContentDigest(headings),
        content: JSON.stringify(headings),
      
    ;

    await createNode(headingNode);
  

我使用 Gatsby develop 命令启动该站点。然后我打开 graphIQL 并运行这个查询：

query MyQuery 
  topicInternalHeadings(path: eq: "/mypage.html") 
    headings 
      level
      path
      text
    
  

查询返回topicInternalHeadings 节点的数据。

然后我打开http://localhost:8000/myPage.html，上面有类似的查询。但是，它的查询结果是：

markdownRemark: …, topicInternalHeadings: null

预期结果

我在插件中创建的 graphql 节点数据可用于 Gatsby 页面上的 graphiql 和 graphql 查询。

实际结果

节点数据可用于 graphiql，但在 Gatsby 页面上的 graphql 查询返回 null。

【问题讨论】：

感谢您抽出宝贵的时间整理复制回购！不幸的是，我无法重现，topicInternalQuery 在我的 GraphiQL 中也是 null。可能是缓存问题，你可以试试gatsby clean 告诉我这是否解决了它？

奇怪——我跑了gatsby clean，然后跑gatsby develop，我在GraphiQL中看到了数据。不确定我们看到不同的结果会发生什么。不同版本的盖茨比？我已将 gatsby 更新到 2.19.12 和 gatsby-transformer-remark 2.6.50。我提交了我的 yarn.lock 文件，所以也许可以尝试使用它。

【参考方案1】：

在我的情况下，我页面中的查询没有名称，所以取而代之的是：

 query 
   allMdx(sort: fields: frontmatter___date, order: DESC, limit: 6) 
  edges 
.....

这样做：

query SomeMeaningFulName 
   allMdx(sort: fields: frontmatter___date, order: DESC, limit: 6) 
  edges