Блог

Запрос 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

У нас есть доступ к markdown в allFile запросе с помощью childMarkdownRemark, как вы можете видеть выше.

Во многих руководствах YouTube люди используют allMarkdownRemark . Есть ли какая-то конкретная причина для этого?

Это всегда зависит от вашей файловой системы и от того, как она настроена.

Короткий ответ заключается в том, что allFile извлекает все типы файлов (изображения, уценки, JSON и т. Д.), Установленные в вашем gatsby-source-filesystem while allMarkdownRemark , извлекает только файлы уценки, потому что плагин transformer ранее создал для этого определенный узел.

allMarkdownRemark конечно, он более специфичен и обладает лучшей производительностью, поскольку вы запрашиваете только файлы markdown, а не все виды файлов, подобных allFile does. Что касается фильтров, доступны оба (относительный и абсолютный пути), используйте GraphQL playground ( localhost:8000/___graphql ) для их тестирования.

TL; DR

gatsby-source-filesystem создает файловые узлы из файлов. Различные плагины «transformer» могут преобразовывать файловые узлы в различные другие типы данных, например gatsby-transformer-json . преобразует файлы JSON в узлы данных JSON и gatsby-transformer-remark преобразует файлы markdown в MarkdownRemark узлы, из которых вы можете запрашивать HTML-представление markdown.

Подводя итог, gatsby-source-filesystem извлекает все типы файлов, но должен быть установлен для каждой папки данных, чтобы помочь другим плагинам преобразовать тип файла в узлы, чтобы сделать их доступными для Gatsby и GraphQL.

allMarkdownRemark , это еще один плагин transformer, который превращает все файлы 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, а также изображения и уценки, но вы не сможете запрашивать у них конкретные данные, потому что нет плагина transformer, который создал узел, кроме того, вы потеряете все преимущества использования комбинированных плагинов. Если вы добавите 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 ), что избавляет вас от нескольких головных болей и анализирует изображения из него.