gatsby中的allFile和allMarkdownRemark有什么区别

Question

所有文件查询：

query{
  allFile{
    edges{
      node{
        childMarkdownRemark{
          frontmatter{
            title
            desc
            link
          }
        }
        childImageSharp{
          fluid{
            srcSetWebp
          }
        }
      }
    }
  }
}

对于上述所有文件查询，我得到以下输出

{
  "data": {
    "allFile": {
      "edges": [
        {
          "node": {
            "childMarkdownRemark": {
              "frontmatter": {
                "title": "Arrays in Javascript ",
                "desc": "I am hello i am the greatest lorem ipsum diut shit in the world of world",
                "link": null
              }
            },
            "childImageSharp": null
          }
        },
      }

allMarkdown 查询：

query{
  allMarkdownRemark{
    edges{
      node{
        frontmatter{
          title
          desc
          link
        }
      }
    }
  }
}

上述allMarkdown查询的输出是

{
  "data": {
    "allMarkdownRemark": {
      "edges": [
        {
          "node": {
            "frontmatter": {
              "title": "This is party react",
              "desc": "I am React GUyyyy ",
              "link": null
            }
          }
        },

输出限制为 1 项以节省问题的空间

allFile 和 allMarkdownRemark 查询之间是否存在性能差异

在allFile查询中，我们可以获取相对路径，相对目录，而allMarkdownRemark仅限于fileAbsolutePath

我们可以使用 childMarkdownRemark 在 allFile 查询中访问 markdown，如上所示。

在许多 YouTube 教程中，人们使用 allMarkdownRemark。这样做有什么具体原因吗？

Answer 1

这始终取决于您的文件系统及其设置方式。

简短的回答是allFile 检索在您的gatsby-source-filesystem 中设置的所有类型的文件（图像、降价、JSON 等），而allMarkdownRemark 仅获取降价文件，因为转换器插件之前已经创建了一个特定节点这样做。

allMarkdownRemark 当然更具体，性能更好，因为您只查询降价文件，而不是像allFile 这样的所有类型的文件。关于过滤器，两者都可用（相对路径和绝对路径），使用 GraphQL 游乐场 (localhost:8000/___graphql) 来测试它们。

---

TL;DR

gatsby-source-filesystem 从文件创建文件节点。各种“转换器”插件可以将文件节点转换为各种其他类型的数据，例如gatsby-transformer-json 将 JSON 文件转换为 JSON 数据节点，gatsby-transformer-remark 将 markdown 文件转换为 MarkdownRemark 节点，您可以从中查询 Markdown 的 HTML 表示形式。

总而言之，gatsby-source-filesystem 检索所有类型的文件，但必须为每个数据文件夹设置，以帮助其他插件将文件类型转换为节点，以使它们可用于 Gatsby 和 GraphQL。

allMarkdownRemark，是另一个转换器插件，它可以将所有 markdown 文件（之前在 gatsby-source-filesystem 中设置）转换为 GraphQL 节点，以便在您查询 markdown 文件时使它们可用，从而允许您从中检索特定数据。

让我们假设一个像这样的文件系统：

{
  resolve: `gatsby-source-filesystem`,
  options: {
    name: `images`,
    path: `${__dirname}/src/images/`,
  },
},

{
  resolve: `gatsby-source-filesystem`,
  options: {
    name: `jsons`,
    path: `${__dirname}/src/jsons/`,
  },
},
{
  resolve: `gatsby-source-filesystem`,
  options: {
    name: `markdowns`,
    path: `${__dirname}/src/markdowns/`,
  },
},

如果您像这样离开文件系统，allFile 将检索 JSON 以及图像和降价，但您将无法从中查询特定数据，因为没有创建节点的转换器插件，此外，您将失去使用组合插件的所有好处。如果您将 gatsby-transformer-remark 添加到之前的文件系统配置中，例如：

{
  resolve: `gatsby-transformer-remark`,
  options: {
    plugins: [
      {
        resolve: `gatsby-remark-relative-images`,
      },
      {
        resolve: `gatsby-remark-images`,
        options: {
          maxWidth: 1200,
          withWebp: true,
        },
      },
    ],
  },
},

您正在为所有 Markdown 文件创建节点并为其中的图像创建相对路径 (gatsby-remark-relative-images)，这样可以省去一些麻烦并从中解析图像。