[解決済み】gatsbyのallFileとallMarkdownRemarkの違いは何ですか？

質問

allFile クエリ :

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

マークダウンにアクセスできるのは allFile を使ってクエリを実行します。 ChildMarkdownRemark のようになります。

YouTubeのチュートリアルでは、多くの人が allMarkdownRemark . 何か特別な理由があるのでしょうか？

どのように解決するのですか？

ファイルシステムとその設定に常に依存します。

簡単に言うと allFile に設定されたあらゆる種類のファイル（画像、マークダウン、JSONなど）を取得します。 gatsby-source-filesystem 一方 allMarkdownRemark はマークダウンファイルをフェッチするだけです。これは、トランスフォーマープラグインが以前にそのための特定のノードを作成したためです。

allMarkdownRemark のようなあらゆる種類のファイルではなく、マークダウンファイルのみを照会しているため、より具体的でパフォーマンスも優れています。 allFile があります。フィルターについては、両方が利用可能です（相対パスと絶対パス）、GraphQLプレイグラウンドを使用します（( localhost:8000/___graphql ) を使ってテストしてください。

TL;DR

gatsby-source-filesystem は、ファイルからファイルノードを作成します。様々な変換プラグインは、ファイルノードを他の様々なタイプのデータに変換することができます。 gatsby-transformer-json は、JSON ファイルを JSON データノードに変換し gatsby-transformer-remark はマークダウン・ファイルを MarkdownRemark ノードを作成し、そこからマークダウンのHTML表現を問い合わせることができます。

要約する。 gatsby-source-filesystem はすべての種類のファイルを取得しますが、他のプラグインがファイルの種類をノードに変換して Gatsby と GraphQL で利用できるようにするために、各データフォルダに対して設定する必要があります。

allMarkdownRemark はもうひとつの変換プラグインで、すべてのマークダウン・ファイル (以前は gatsby-source-filesystem をGraphQLノードに変換し、マークダウンファイルへの問い合わせ時に利用できるようにすることで、特定のデータを取得することができるようになります。

のようなファイルシステムを想定してみよう。

{
  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,
        },
      },
    ],
  },
},

すべてのマークダウンファイルのノードを作成し、そこに画像の相対パスを作成しています( gatsby-remark-relative-images )、何があなたの頭痛の種を少し節約し、そこから画像を解析します。