feat(gatsby-graphiql-explorer): Amend Query name if available (#36110)

Co-authored-by: pieh <[email protected]>

Author: Paul Scanlon

packages/gatsby-graphiql-explorer/src/app/__tests__/snippets.js

@@ -0,0 +1,79 @@
+import { removeQueryName } from "../snippets"
+import { stripIndent } from "common-tags"
+
+describe(`removeQueryName`, () => {
+  function getFullQuery(startOfQuery) {
+    return `${startOfQuery}
+  allMarkdownRemark {
+    nodes {
+      excerpt
+    }
+  }
+}`
+  }
+
+  it(`{`, () => {
+    const startOfQuery = `{`
+    expect(removeQueryName(getFullQuery(startOfQuery))).toMatchInlineSnapshot(`
+      "{
+        allMarkdownRemark {
+          nodes {
+            excerpt
+          }
+        }
+      }"
+    `)
+  })
+
+  it(`query {`, () => {
+    const startOfQuery = `query {`
+    expect(removeQueryName(getFullQuery(startOfQuery))).toMatchInlineSnapshot(`
+      "query {
+        allMarkdownRemark {
+          nodes {
+            excerpt
+          }
+        }
+      }"
+    `)
+  })
+
+  it(`query NameOfTheQuery {`, () => {
+    const startOfQuery = `query NameOfTheQuery {`
+    expect(removeQueryName(getFullQuery(startOfQuery))).toMatchInlineSnapshot(`
+      "query {
+        allMarkdownRemark {
+          nodes {
+            excerpt
+          }
+        }
+      }"
+    `)
+  })
+
+  it(`query ($args: String) {`, () => {
+    const startOfQuery = `query ($args: String) {`
+    expect(removeQueryName(getFullQuery(startOfQuery))).toMatchInlineSnapshot(`
+      "query ($args: String) {
+        allMarkdownRemark {
+          nodes {
+            excerpt
+          }
+        }
+      }"
+    `)
+  })
+
+  it(`query NameOfTheQuery ($args: String) {`, () => {
+    const startOfQuery = `query NameOfTheQuery ($args: String) {`
+    expect(removeQueryName(getFullQuery(startOfQuery))).toMatchInlineSnapshot(`
+      "query ($args: String) {
+        allMarkdownRemark {
+          nodes {
+            excerpt
+          }
+        }
+      }"
+    `)
+  })
+})

packages/gatsby-graphiql-explorer/src/app/snippets.js

@@ -1,7 +1,15 @@
+export function removeQueryName(query) {
+  return query.replace(
+    /^[^{(]+([{(])/,
+    (_match, openingCurlyBracketsOrParenthesis) =>
+      `query ${openingCurlyBracketsOrParenthesis}`
+  )
+}
+
 const getQuery = (arg, spaceCount) => {
   const { operationDataList } = arg
   const { query } = operationDataList[0]
-  const anonymousQuery = query.replace(/query\s.+{/gim, `{`)
+  const anonymousQuery = removeQueryName(query)
   return (
     ` `.repeat(spaceCount) +
     anonymousQuery.replace(/\n/g, `\n` + ` `.repeat(spaceCount))
@@ -16,13 +24,13 @@ const pageQuery = {
   generate: arg => `import React from "react"
 import { graphql } from "gatsby"
 
-const ComponentName = ({ data }) => <pre>{JSON.stringify(data, null, 4)}</pre>
+const Page = ({ data }) => <pre>{JSON.stringify(data, null, 4)}</pre>
 
 export const query = graphql\`
 ${getQuery(arg, 2)}
 \`
 
-export default ComponentName
+export default Page
 
 `,
 }