feat(docs): Clarify gatsby-plugin-mdx requirements for gatsby-source-filesystem (#15604)

* feat(docs): Clarify gatsby-plugin-mdx requirements for gatsby-source-filesystem

Adds an example code and additional note explaining that mdx plugin needs to have filesystem pre-processing files.
Ref: #15594

* Update packages/gatsby-plugin-mdx/README.md

Co-Authored-By: John Otander <[email protected]>

* Update packages/gatsby-plugin-mdx/README.md

Co-Authored-By: John Otander <[email protected]>

Author: yamalight

packages/gatsby-plugin-mdx/README.md

@@ -60,14 +60,27 @@ After installing gatsby-plugin-mdx you can add it to your plugins list in your
 
 ```js
 module.exports = {
-  plugins: [`gatsby-plugin-mdx`],
+  plugins: [
+    {
+      resolve: `gatsby-source-filesystem`,
+      options: {
+        name: `pages`,
+        path: `${__dirname}/src/pages/`,
+      },
+    },
+    `gatsby-plugin-mdx`,
+  ],
 }
 ```
 
 By default, this configuration will allow you to create pages
 with `.mdx` files in `src/pages` and will process any Gatsby nodes
 with Markdown media types into MDX content.
 
+Note that gatsby-plugin-mdx requires gatsby-source-filesystem to be present
+and configured to process local markdown files in order to
+generate the resulting Gatsby nodes.
+
 ### Configuration
 
 gatsby-plugin-mdx exposes a configuration API that can be used similarly to
@@ -115,6 +128,20 @@ layout defined, even if it's imported manually using `import MDX from './thing.m
 // gatsby-config.js
 module.exports = {
   plugins: [
+    {
+      resolve: `gatsby-source-filesystem`,
+      options: {
+        name: `pages`,
+        path: `${__dirname}/src/pages/`,
+      },
+    },
+    {
+      resolve: `gatsby-source-filesystem`,
+      options: {
+        name: `posts`,
+        path: `${__dirname}/src/posts/`,
+      },
+    },
     {
       resolve: `gatsby-plugin-mdx`,
       options: {