What is the difference between allFile and allMarkdownRemark in gatsby

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.

Leave a Comment