graphql - 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 项以节省问题空间

allFile 和allMarkdownRemark 查询有性能差异吗

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

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

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

Answer 1

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

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

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

---

长话短说

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 以及图像和 Markdown ，但你将无法从中查询特定数据，因为没有创建转换器插件一个节点，此外，您将失去使用组合插件的所有好处。如果您将 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)，这让您省去了一些麻烦并从中解析图像。