JavaScript for WordPress Forums Gatsby Gatsby Basics: gatsby-mdx is depreciated, use gatsby-plugin-mdx instead Reply To: Gatsby Basics: gatsby-mdx is depreciated, use gatsby-plugin-mdx instead

#125503
Leland Fiegel
Participant

Just wanted to add to this post because it is linked to from this lesson: https://javascriptforwp.com/courses/gatsby-basics/sections/creating-content-with-markdown-mdx-503/

I found that I couldn’t see allMdx available in GraphiQL content without some changes.

Instead of npm installing gatsby-mdx, install gatsby-plugin-mdx, as described here: https://www.gatsbyjs.org/docs/mdx/getting-started/#add-mdx-to-an-existing-gatsby-site

If you already followed along with the tutorial:

– In your project directory, remove the ‘gatsby-mdx’ line in your package.json
– Delete package-lock.json
– Run the following terminal command in the project directory: npm install –save gatsby-plugin-mdx @mdx-js/mdx @mdx-js/react
– This will update your package.json and generate a new package-lock.json file
– Reference your newly installed gatsby-plugin-mdx plugin in gatsby-config.js (merely replacing with “gatsby-mdx” with “gatsby-plugin-mdx” seems to do the trick)
– Run: gatsby develop
– At this point, you will see a new “allMdx” section in your GraphiQL which means it can now be queried just like in the course video

Hope this helps!