Gatsby: Internal Content not populated by gatsby-source-filesystem

[omarhachach]

Description

In the GraphQL query:

query ContentQuery {
  allFile {
    group(field: dir) {
      edges {
        node {
          base
          relativeDirectory
          internal {
            content
            contentDigest
          }
        }
      }
    }
  }
}

The content is null always.

Steps to reproduce

Minimal Reproduction, set up gatsby-source-filesystem in gatsby-config.js:

{
    resolve: 'gatsby-source-filesystem',
    options: {
        name: 'content',
        path: `${__dirname}/content`
    }
},

Where content/ directory holds a single file:
content/file.html

The file contains:

<p>This is a test file</p>

Now run gatsby develop -p 3000
and go to localhost:3000/__graphql and run the query.

Expected result

{
  "data": {
    "allFile": {
      "group": [
        {
          "edges": [
            {
              "node": {
                "base": "file.html",
                "relativeDirectory": "",
                "internal": {
                  "content": "<p>This is a test file</p>",
                  "contentDigest": "bf774dcb21d10f1e73f39665c278641c"
                }
              }
            }
          ]
        }
      ]
    }
  }
}

Actual result

{
  "data": {
    "allFile": {
      "group": [
        {
          "edges": [
            {
              "node": {
                "base": "file.html",
                "relativeDirectory": "",
                "internal": {
                  "content": null,
                  "contentDigest": "bf774dcb21d10f1e73f39665c278641c"
                }
              }
            }
          ]
        }
      ]
    }
  }
}

Environment

System:
OS: Windows 10 10.0.18363
CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
Binaries:
Node: 12.14.1 - C:\Program Files\nodejs\node.EXE
Yarn: 1.21.1 - C:\Users\Omar\AppData\Roaming\npm\yarn.CMD
npm: 6.13.7 - C:\Program Files\nodejs\npm.CMD
Languages:
Python: 2.7.17
Browsers:
Edge: 44.18362.449.0
npmPackages:
gatsby: 2.19.7 => 2.19.7
gatsby-image: 2.2.39 => 2.2.39
gatsby-plugin-emotion: 4.1.21 => 4.1.21
gatsby-plugin-google-tagmanager: 2.1.24 => 2.1.24
gatsby-plugin-manifest: 2.2.39 => 2.2.39
gatsby-plugin-offline: 3.0.32 => 3.0.32
gatsby-plugin-polyfill-io: 1.1.0 => 1.1.0
gatsby-plugin-react-helmet: 3.1.21 => 3.1.21
gatsby-plugin-remove-console: 0.0.2 => 0.0.2
gatsby-plugin-sharp: 2.4.3 => 2.4.3
gatsby-plugin-sitemap: 2.2.26 => 2.2.26
gatsby-plugin-svgr: 2.0.2 => 2.0.2
gatsby-plugin-web-font-loader: 1.0.4 => 1.0.4
gatsby-source-filesystem: 2.1.48 => 2.1.48
gatsby-transformer-sharp: 2.3.13 => 2.3.13

[sidharthachatterjee]

gatsby-source-filesystem is lazy by design. Instead of loading content from all Nodes when creating nodes, File nodes serve as references to the files. Transformer plugins can then use the loadNodeContent action to load that content when necessary.

[jonniebigodes]

@omarhachach to add a little more context and possibly give you a alternative way to achieve what you intend to do, if the endgame here is for you to display html content in your page, you can take a look at this it will simplify your workflow. Don't get me wrong, the data layer that powers Gatsby is great and lets you accomplish many things with very little effort, but like all things it has it's limits.

If you want a more detailed explanation on how to achieve what i think you're trying to do, take a look at this to get you some insights and get you started.

[omarhachach]

That's not exactly what I was trying to accomplish with this. The perk of using GraphQL for our process was being able to group and pick data out from the individual folders of content. That way filtering, grouping and searching was all handled through a simple query.

We attain the html (and other files) dynamically from an external source, so this way it could all be automated without a very specific script to handle it. But thank you both for your answers @sidharthachatterjee and @jonniebigodes.