feat: Add Gatsby with MDX example (#166)

README.md

@@ -39,6 +39,7 @@ Examples demonstrating how to use GraphCMS with popular application frameworks.
 | [Gatsby Image](with-gatsby-image)                                | How to use [`gatsby-image`](https://www.gatsbyjs.org/packages/gatsby-image/) with GraphCMS assets                                                                                                                                                                | https://graphcms-with-gatsby-image.now.sh                  |
 | [GraphCMS Image](with-graphcms-image)                            | How to use [`graphcms-image`](https://github.com/GraphCMS/graphcms-image) with Gatsby                                                                                                                                                                            | https://graphcms-with-graphcms-image.now.sh                |
 | [Gridsome](with-gridsome)                                        | A basic example using `gridsome create` CLI and [`@gridsome/source-graphql`](https://www.npmjs.com/package/@gridsome/source-graphql)                                                                                                                             | https://graphcms-with-gridsome.now.sh                      |
+| [MDX (with Gatsby)](with-gatsby-mdx)                                | How to use [`gatsby-plugin-mdx`](https://www.gatsbyjs.com/plugins/gatsby-plugin-mdx) with `RichText` fields from GraphCMS.                                                                                                                                                                | https://graphcms-with-gatsby-mdx.vercel.app                  |
 | [MDX (with Next.js)](with-nextjs-mdx-remote)                     | This example demonstrates how to use markdown fields from GraphCMS with `MDX` in Next.js                                                                                                                                                                         | https://graphcms-with-nextjs-mdx-remote.vercel.app         |
 | [Next.js](with-nextjs)                                           | A basic [Next.js](https://nextjs.org) application, featuring `getStaticProps` and `getStaticPaths` to build static product pages                                                                                                                                 | https://graphcms-with-nextjs.now.sh                        |
 | [Next.js i18n Routing](with-nextjs-i18n-routing)                 | How to use [Next.js Internationalized Routing](https://nextjs.org/docs/advanced-features/i18n-routing) with GraphCMS content                                                                                                                                     | https://graphcms-with-nextjs-i18n-routing.vercel.app       |

with-gatsby-mdx/README.md

@@ -0,0 +1,33 @@
+# Using MDX with Gatsby and GraphCMS
+
+[Join our Slack](https://slack.graphcms.com)
+
+This example demonstrates how to use [`gatsby-plugin-mdx`](https://www.gatsbyjs.com/plugins/gatsby-plugin-mdx) with `RichText` fields from GraphCMS.
+
+• [Demo](https://graphcms-with-gatsby-mdx.vercel.app)
+
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/import/project?template=https://github.com/GraphCMS/graphcms-examples/tree/master/with-gatsby-mdx)
+
+## How to Use
+
+### Download Manually
+
+```bash
+npx degit graphcms/graphcms-examples/with-gatsby-mdx with-gatsby-mdx
+```
+
+Install & Run:
+
+```bash
+cd with-gatsby-mdx
+npm install
+npm run dev
+# or
+cd with-gatsby-mdx
+yarn
+yarn dev
+```
+
+### Run on Codesandbox
+
+[![Develop with Codesandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/GraphCMS/graphcms-examples/tree/master/with-gatsby-mdx)

with-gatsby-mdx/gatsby-browser.js

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { MDXProvider } from '@mdx-js/react';
+
+const wrapRootElement = ({ element }) => (
+  <MDXProvider components={{ Test: () => 'This is a test MDX component' }}>
+    {element}
+  </MDXProvider>
+);
+
+export { wrapRootElement };

with-gatsby-mdx/gatsby-config.js

@@ -0,0 +1,12 @@
+module.exports = {
+  plugins: [
+    `gatsby-plugin-mdx`,
+    {
+      resolve: `gatsby-source-graphcms`,
+      options: {
+        endpoint: `https://api-eu-central-1.graphcms.com/v2/ck8sn5tnf01gc01z89dbc7s0o/master`,
+        buildMarkdownNodes: true,
+      },
+    },
+  ],
+};

with-gatsby-mdx/gatsby-node.js

@@ -0,0 +1,24 @@
+exports.createPages = async ({ graphql, actions: { createPage } }) => {
+  const {
+    data: { products },
+  } = await graphql(`
+    {
+      products: allGraphCmsProduct {
+        nodes {
+          id
+          slug
+        }
+      }
+    }
+  `);
+
+  products.nodes.forEach(({ id, slug }) =>
+    createPage({
+      path: `/products/${slug}`,
+      component: require.resolve(`./src/templates/ProductPage.js`),
+      context: {
+        id,
+      },
+    })
+  );
+};

with-gatsby-mdx/gatsby-ssr.js

@@ -0,0 +1 @@
+export { wrapRootElement } from './gatsby-browser';

with-gatsby-mdx/graphcms-fragments/Asset.graphql

@@ -0,0 +1,22 @@
+fragment Asset on Asset {
+  stage
+  locale
+  remoteId: id
+  createdAt(variation: COMBINED)
+  updatedAt(variation: COMBINED)
+  publishedAt(variation: COMBINED)
+  handle
+  fileName
+  height
+  width
+  size
+  mimeType
+  productImage {
+    ... on Product {
+      remoteTypeName: __typename
+      remoteId: id
+      locale
+    }
+  }
+  url
+}

with-gatsby-mdx/graphcms-fragments/Product.graphql

@@ -0,0 +1,39 @@
+fragment Product on Product {
+  stage
+  locale
+  remoteId: id
+  createdAt(variation: COMBINED)
+  updatedAt(variation: COMBINED)
+  publishedAt(variation: COMBINED)
+  name
+  slug
+  description
+  price
+  reviews {
+    ... on Review {
+      remoteTypeName: __typename
+      remoteId: id
+    }
+  }
+  votes {
+    ... on Vote {
+      remoteTypeName: __typename
+      remoteId: id
+    }
+  }
+  image {
+    ... on Asset {
+      remoteTypeName: __typename
+      remoteId: id
+      locale
+    }
+  }
+  content {
+    ... on RichText {
+      raw
+      html
+      markdown
+      text
+    }
+  }
+}

with-gatsby-mdx/graphcms-fragments/Review.graphql

@@ -0,0 +1,16 @@
+fragment Review on Review {
+  stage
+  remoteId: id
+  createdAt
+  updatedAt
+  publishedAt
+  name
+  comment
+  product {
+    ... on Product {
+      remoteTypeName: __typename
+      remoteId: id
+      locale
+    }
+  }
+}

with-gatsby-mdx/graphcms-fragments/Vote.graphql

@@ -0,0 +1,14 @@
+fragment Vote on Vote {
+  stage
+  remoteId: id
+  createdAt
+  updatedAt
+  publishedAt
+  product {
+    ... on Product {
+      remoteTypeName: __typename
+      remoteId: id
+      locale
+    }
+  }
+}

with-gatsby-mdx/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "graphcms-with-gatsby-mdx",
+  "private": true,
+  "license": "MIT",
+  "scripts": {
+    "build": "gatsby build",
+    "clean": "gatsby clean",
+    "dev": "gatsby develop"
+  },
+  "dependencies": {
+    "@mdx-js/mdx": "1.6.22",
+    "@mdx-js/react": "1.6.22",
+    "gatsby": "2.31.1",
+    "gatsby-plugin-mdx": "1.9.0",
+    "gatsby-source-graphcms": "2.2.0",
+    "react": "17.0.1",
+    "react-dom": "17.0.1"
+  }
+}

with-gatsby-mdx/src/pages/index.js

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { graphql, useStaticQuery, Link } from 'gatsby';
+
+const pageQuery = graphql`
+  {
+    products: allGraphCmsProduct {
+      nodes {
+        name
+        slug
+        price
+      }
+    }
+  }
+`;
+
+const IndexPage = () => {
+  const { products } = useStaticQuery(pageQuery);
+
+  return products.nodes.map(({ slug, ...product }) => (
+    <Link key={slug} to={`/products/${slug}`}>
+      {product.name}
+    </Link>
+  ));
+};
+
+export default IndexPage;

with-gatsby-mdx/src/templates/ProductPage.js

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import { graphql } from 'gatsby';
+import { MDXRenderer } from 'gatsby-plugin-mdx';
+
+const ProductPage = ({ data: { product } }) => (
+  <React.Fragment>
+    <h1>{product.name}</h1>
+    <p>{product.description}</p>
+    <p>
+      {new Intl.NumberFormat('de-DE', {
+        style: 'currency',
+        currency: 'EUR',
+      }).format(product.price)}
+    </p>
+    {product.content ? (
+      <MDXRenderer>{product.content.markdownNode.childMdx.body}</MDXRenderer>
+    ) : null}
+  </React.Fragment>
+);
+
+export const pageQuery = graphql`
+  query ProductPageQuery($id: String!) {
+    product: graphCmsProduct(id: { eq: $id }) {
+      name
+      description
+      price
+      content {
+        markdownNode {
+          childMdx {
+            body
+          }
+        }
+      }
+    }
+  }
+`;
+
+export default ProductPage;