What is the difference between allFile and allMarkdownRemark in gatsby

user_13270314 0
Viewed 1102

allFile query :

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

For the above allFile query i get the below output

{
  "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:

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

The output for the above allMarkdown query is

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

The output is limited to 1 item to save space for the question

Is there any performance difference between allFile and allMarkdownRemark query

In allFile query, we can fetch relative path, relative Directory whereas allMarkdownRemark is limited to fileAbsolutePath

We have access to markdown in allFile query using childMarkdownRemark as you can see above.

In many YouTube tutorials, people use allMarkdownRemark. Is there any specific reason to do so?

graphql gatsby markdown
1 Answers

It always depends on your filesystem and how it is set up.

The short answer is that allFile retrieves all kind of files (images, markdowns, JSONs, etc) set in your gatsby-source-filesystem while allMarkdownRemark only fetches the markdown files because a transformer plugin has previously created a specific node to do so.

allMarkdownRemark, of course, is more specific and has better performance, since you are querying only markdown files, not all kinds of files like allFile does. Regarding the filters, both are available (relative and absolute paths), use the GraphQL playground (localhost:8000/___graphql) to test them.

TL;DR

gatsby-source-filesystem creates file nodes from files. The various "transformer" plugins can transform file nodes into various other types of data e.g. gatsby-transformer-json transforms JSON files into JSON data nodes and gatsby-transformer-remark transforms markdown files into MarkdownRemark nodes from which you can query an HTML representation of the markdown.

Summarizing, gatsby-source-filesystem retrieves all types of files but must be set for each data folder to help other plugins to transform the file type into nodes to make them available to Gatsby and GraphQL.

allMarkdownRemark, is another transformer plugin that turns all markdown files (previously set in the gatsby-source-filesystem) into GraphQL nodes to make them available when you query a markdown file, allowing you to retrieve specific data from it.

Let's assume a filesystem like:

{
  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/`,
  },
},

If you leave the filesystem like this, allFile will retrieve JSONs as well as images and markdowns but you won't be able to query specific data from them, because there's no transformer plugin that has created a node, in addition, you will lose all the benefits of using combined plugins. If you add the gatsby-transformer-remark with the previous filesystem configuration like:

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

You are creating nodes for all markdown files and creating relative paths for images in there (gatsby-remark-relative-images), what saves you a few headaches and parses the images from it.

user_55853710
Related