gatsby中allFile和allMarkdownRemark有什么区别

Question

所有文件查询：

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

对于上面的 allFile 查询，我得到以下输出

{
  "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项以保存space问题

allFile 和 allMarkdownRemark query

之间有性能差异吗

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

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

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

Answer 1

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

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

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

TL;DR

gatsby-source-filesystem 从文件创建文件节点。各种“转换器”插件可以将文件节点转换为各种其他类型的数据，例如gatsby-transformer-json 将 JSON 文件转换为 JSON 数据节点，gatsby-transformer-remark 将 markdown 文件转换为 MarkdownRemark 节点，您可以从中查询 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 将检索 JSONs 以及图像和降价，但你将无法从中查询特定数据，因为没有转换器已创建节点的插件，此外，您将失去使用组合插件的所有好处。如果您使用以前的文件系统配置添加 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)，这样可以让您省去一些麻烦并从中解析图像。

gatsby中allFile和allMarkdownRemark有什么区别

What is the difference between allFile and allMarkdownRemark in gatsby

markdown

graphql

gatsby

所有文件查询：

allMarkdown查询：

TL;DR