如何访问 Gatsby 中“file”或“allFiles”GraphQL 查询返回的文件的文本内容?

Posted

技术标签:

【中文标题】如何访问 Gatsby 中“file”或“allFiles”GraphQL 查询返回的文件的文本内容?【英文标题】:How to access text contents of file returned by a "file" or "allFiles" GraphQL query in Gatsby? 【发布时间】:2020-04-20 15:25:21 【问题描述】:

我正在尝试访问 Gatsby 中的“文件”GraphQL 查询返回的文本文件的内容(通过 gatsby-source-filesystem 插件)。该查询肯定会返回一个 File 节点。问题是我希望 internal>contents 字段包含文件的内容,但它没有;它始终为空。这是使用 Gatsby 的 GraphiQL 浏览器获得的示例查询和结果。问题是(1)我做错了什么,以及(2)我应该怎么做才能实现访问文件内容的意图?

查询

query MyQuery 
  file(ext: eq: ".lean", name: eq: "test") 
    name
    relativePath
    size
    internal 
      content
      mediaType
    
  

结果


  "data": 
    "file": 
      "name": "test",
      "relativePath": "test.lean",
      "size": 10,
      "internal": 
        "content": null,
        "mediaType": "application/octet-stream"
      
    
  

从结果中可以看出,文件不是空的(文件里面有一小行 Lean Prover 代码),但是 internal>content 字段的值仍然为空。我显然做错了什么,但经过一个小时试图弄清楚是什么,我认为其他人也可能会从快速回答中受益。感谢您阐明我的问题。

【问题讨论】:

【参考方案1】:

好的,所以 gatsby-source-filesystem 实际上导出了一个辅助方法 loadNodeContents(当然它只是从文件中读取)。唯一的问题是这个插件的公共文档站点上没有记录。这是出现相关代码的文件。 https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-source-filesystem/src/index.js

【讨论】:

很抱歉在这里自言自语,但上面的功能似乎不起作用。基本问题似乎是 fs 在客户端不可用。还在寻找。 好的,还有一条评论。问题/问题是文件系统 (fs) 不适用于在 Gatsby 中编写的大多数代码,因为该代码将从 S3 存储桶或其他东西中的某个目录运行。 fs 仅在网站 build 时可用。那么,诀窍在于 fs 在 gatsby-node.js 文件中可用。可以在那里获取内容并作为辅助字段附加到通过“文件”或“所有文件”查询检索的文件节点。为此,需要实现 onNodeCreate。辅助字段“fields.content”可用于查询并将内容返回给客户端。

以上是关于如何访问 Gatsby 中“file”或“allFiles”GraphQL 查询返回的文件的文本内容?的主要内容,如果未能解决你的问题,请参考以下文章

如何使用 react 或 Gatsby(whitout 窗口 || 文档)在 url 中处理(获取、设置)查询字符串

Gatsby createTypes 不使用 File 创建 localFile

如何将 Gatsby 混合站点连接到 Apollo/Graphcool(或 Redux)?

Gatsby 和 GraphQL:访问模板页面中的数据

如何在 Gatsby 中根据其他字段删除 GraphQL 字段?

Gatsby GraphQL 查询多个图像