Adding lowercase "graphql" to deck breaks parsing

[alfiehub]

To reproduce just add the lowercased word "graphql" anywhere to your deck and start with mdx-deck deck.mdx

This is the error message printed

 ERROR #85911  GRAPHQL

There was a problem parsing "/home/alfiehub/decks/deck.mdx"; any GraphQL
fragments or queries in this file were not processed.

This may indicate a syntax error in the code, or it may be a file type
that Gatsby does not know how to parse.

File: ../../deck.mdx

[ghost]

I can confirm this. Same error. I just made a presentation on GraphQL, and this drove me nuts.

[dylanirlbeck]

Can confirm this is still an issue. Dang this was annoying.

[trevorblades]

I can't add a link to https://apollographql.com/docs because of this issue

[trevorblades]

After some more digging, I realized that this line is likely the culprit: https://github.com/jxnblk/mdx-deck/blob/master/packages/gatsby-plugin/gatsby-node.js#L65

In version 4, the deck.mdx file gets sent to createPage as a component option, so Gatsby is treating it like a page template. I'm guessing this is enabled by the resolvableExtensions hook on line 53.

Since Gatsby thinks this file is a page, it tries to parse/execute instances of graphql as it believes them to be static queries. I'm not exactly sure how to get around this issue, but I'll keep thinking.

[trevorblades]

This is kinda janky, but I've got a temporary solution for writing code blocks using the graphql tagged template literal, like this one:

import {graphql, useStaticQuery} from 'gatsby';

function HomePage() {
  const data = useStaticQuery(
    graphql`
      query HomePageQuery {
        allInstaNode {
          nodes {
            id
            caption
            original
          }
        }
      }
    `
  );

  // render instagram posts
}

First, I write all instances of lowercase "graphql" with an accent/diacritic in the letter "a", like gräphql. Then I create a custom component in my theme for code elements, using the default prism code highlighter.

import {themes} from 'mdx-deck';

export const theme = {
  components: {
    ...themes.prism.components,
    code: props => themes.prism.components.code({
      ...props,
      children: props.children.replace(/(gr)[àáâäãåā](phql)/g, '$1a$2')
    })
  }
}

This regular expression looks for instances of the lowercase "graphql" with an accented "a", and replaces it using capture groups so that I don't write a lowercase "graphql" in the 2nd argument of replace.

[lkleuver]

for code at least this works for me:

import React from "react";
import { Prism as Highlighter } from "react-syntax-highlighter";

export default ({ children }) => <Highlighter language="graphql">{children}</Highlighter>;

deck.mdx:

<Highlight>
  {`
{
  hero(ability: "inv") {
    name
    # Queries can have comments!
    friends {
      name
    }
  }
}
`}
</Highlight>

[ProchaLu]

I got the same error when creating a slide deck. After some digging, I found that the problem was in the file node-mdules/gatsby/dist/query/file-parser.js

https://github.com/gatsbyjs/gatsby/blob/61f197d2c6deda2d45ba185df190301bb8219676/packages/gatsby/src/query/file-parser.js#L509-L517

After changing the if block the error went away and the slides were created.

  if (
-      !text.includes(`graphql`) &&
-      !text.includes(`gatsby-plugin-image`) &&
-      !text.includes(`getServerData`) &&
-      !text.includes(`config`) &&
-      !text.includes(`Slice`)
+      file.endsWith('.mdx') ||
+      (!text.includes(`graphql`) &&
+        !text.includes(`gatsby-plugin-image`) &&
+        !text.includes(`getServerData`) &&
+        !text.includes(`config`) &&
+.       !text.includes(`Slice`))
    ) {
      return null;
    }