Branch was updated using the 'autoupdate branch' Actions workflow.

components/context/MainContext.tsx

@@ -88,6 +88,7 @@ export type MainContextT = {
     documentType: string
     languageVariants: Array<{ name: string; code: string; hreflang: string; href: string }>
     topics: Array<string>
+    title: string
     fullTitle?: string
     introPlainText?: string
     hidden: boolean
@@ -130,6 +131,7 @@ export const getMainContextFromRequest = (req: any): MainContextT => {
     page: {
       languageVariants: req.context.page.languageVariants,
       documentType: req.context.page.documentType,
+      title: req.context.page.title,
       fullTitle: req.context.page.fullTitle,
       topics: req.context.page.topics || [],
       introPlainText: req.context.page?.introPlainText,

pages/[versionId]/graphql/overview/explorer.tsx

@@ -0,0 +1,62 @@
+import { GetServerSideProps } from 'next'
+
+import {
+  MainContextT,
+  MainContext,
+  getMainContextFromRequest,
+} from 'components/context/MainContext'
+import { Breadcrumbs } from 'components/Breadcrumbs'
+import { DefaultLayout } from 'components/DefaultLayout'
+
+type Props = {
+  mainContext: MainContextT
+  graphqlExplorerUrl: string
+}
+export default function GQLExplorer({ mainContext, graphqlExplorerUrl }: Props) {
+  const { page, airGap } = mainContext
+  return (
+    <MainContext.Provider value={mainContext}>
+      <DefaultLayout>
+        <main className="container-xl px-3 px-md-6 my-4 my-lg-4 d-xl-flex">
+          <article className="markdown-body width-full">
+            <div className="d-lg-flex flex-justify-between">
+              <div className="d-flex flex-items-center breadcrumbs-wrapper">
+                <Breadcrumbs />
+              </div>
+            </div>
+
+            <h1 className="border-bottom-0">{page.title}</h1>
+
+            <div className="mt-2">
+              <div>
+                {airGap ? (
+                  <p>GraphQL explorer is not available on this environment.</p>
+                ) : (
+                  <iframe
+                    id="graphiql"
+                    className="graphql-explorer"
+                    scrolling="no"
+                    src={graphqlExplorerUrl}
+                  >
+                    <p>You must have iframes enabled to use this feature.</p>
+                  </iframe>
+                )}
+              </div>
+            </div>
+          </article>
+        </main>
+      </DefaultLayout>
+    </MainContext.Provider>
+  )
+}
+
+export const getServerSideProps: GetServerSideProps<Props> = async (context) => {
+  const req = context.req as any
+
+  return {
+    props: {
+      mainContext: getMainContextFromRequest(req),
+      graphqlExplorerUrl: req.context.graphql.explorerUrl,
+    },
+  }
+}