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

[PaulieScanlon]

Description

Amend Code Exporter Page Query GraphQL query in gatsby-graphiql-explorer

• Rename Component to Page from ComponentName for Page Query only
• Add condition to only replace query if it has no name.

The following query in GraphiQL...

query MyQuery($id: String) {
  sitePage(id: {eq: $id}) {
    path
  }
}

Should export as...

export const query = graphql`
  query MyQuery($id: String) {
    sitePage(id: {eq: $id}) {
      path
    }
  }
`

Not like this.

export const query = graphql`
  {
    sitePage(id: {eq: $id}) {
      path
    }
  }
`

Here's an example of the full Page Query with this change.

import React from "react"
import { graphql } from "gatsby"

const Page = ({ data }) => <pre>{JSON.stringify(data, null, 4)}</pre>

export const query = graphql`
  query MyQuery($id: String) {
    sitePage(id: {eq: $id}) {
      path
    }
  }
`

export default Page