Upgrade gatsby-mdx to gatsby-plugin-mdx (#86)

gatsby-mdx is deprecated.

Reviewed-by: Brian C <brian.m.carlson@gmail.com>

Author: charmander

gatsby-config.js

@@ -26,7 +26,7 @@ module.exports = {
       }
     },
     {
-      resolve: 'gatsby-mdx',
+      resolve: 'gatsby-plugin-mdx',
       options: {
         gatsbyRemarkPlugins: [
           {

gatsby-node.js

@@ -1,4 +1,3 @@
-const componentWithMDXScope = require('gatsby-mdx/component-with-mdx-scope')
 const path = require('path')
 const startCase = require('lodash.startcase')
 
@@ -14,14 +13,8 @@ exports.createPages = ({ graphql, actions }) => {
                 node {
                   fields {
                     id
-                  }
-                  tableOfContents
-                  fields {
                     slug
                   }
-                  code {
-                    scope
-                  }
                 }
               }
             }

package.json

@@ -18,10 +18,10 @@
     "emotion-theming": "^10.0.10",
     "gatsby": "2.13.23",
     "gatsby-link": "^2.1.1",
-    "gatsby-mdx": "^0.6.2",
     "gatsby-plugin-emotion": "3.0.1",
     "gatsby-plugin-gtag": "^1.0.10",
     "gatsby-plugin-layout": "^1.0.15",
+    "gatsby-plugin-mdx": "^1.2.22",
     "gatsby-plugin-react-helmet": "3.0.12",
     "gatsby-plugin-sharp": "^2.0.35",
     "gatsby-plugin-sitemap": "^2.0.12",

src/templates/docs.js

@@ -2,7 +2,7 @@ import React, { Component } from 'react'
 import Footer from '../components/footer'
 import Helmet from 'react-helmet'
 import { graphql } from 'gatsby'
-import MDXRenderer from 'gatsby-mdx/mdx-renderer'
+import { MDXRenderer } from 'gatsby-plugin-mdx'
 import styled, { injectGlobal } from 'react-emotion'
 import { Layout, Link } from '$components'
 import NextPrevious from '../components/NextPrevious'
@@ -115,7 +115,7 @@ export default class MDXRuntimeTest extends Component {
           </Edit>
         </div>
         <div className={'mainWrapper'}>
-          <MDXRenderer>{mdx.code.body}</MDXRenderer>
+          <MDXRenderer>{mdx.body}</MDXRenderer>
         </div>
         <div className={'addPaddTopBottom'}>
           <NextPrevious mdx={mdx} nav={nav} />
@@ -140,9 +140,7 @@ export const pageQuery = graphql`
         title
         slug
       }
-      code {
-        body
-      }
+      body
       tableOfContents
       parent {
         ... on File {