prerender graphql mutations page (#23757)

Author: rachmari

content/graphql/reference/mutations.md

@@ -18,6 +18,5 @@ Every GraphQL schema has a root type for both queries and mutations. The [mutati
 
 For more information, see "[About mutations](/graphql/guides/forming-calls-with-graphql#about-mutations)."
 
-{% for item in graphql.schemaForCurrentVersion.mutations %}
-  {% include graphql-mutation %}
-{% endfor %}
+<!-- this page is pre-rendered by scripts because it's too big to load dynamically -->
+<!-- see lib/graphql/static/prerendered-mutations.json -->

lib/graphql/static/prerendered-mutations.json

@@ -9,6 +9,9 @@ const prerenderedObjects = readCompressedJsonFileFallback(
 const prerenderedInputObjects = readCompressedJsonFileFallback(
   './lib/graphql/static/prerendered-input-objects.json'
 )
+const prerenderedMutations = readCompressedJsonFileFallback(
+  './lib/graphql/static/prerendered-mutations.json'
+)
 
 const explorerUrl =
   process.env.NODE_ENV === 'production'
@@ -36,6 +39,7 @@ export default function graphqlContext(req, res, next) {
     upcomingChangesForCurrentVersion: upcomingChanges[graphqlVersion],
     prerenderedObjectsForCurrentVersion: prerenderedObjects[graphqlVersion],
     prerenderedInputObjectsForCurrentVersion: prerenderedInputObjects[graphqlVersion],
+    prerenderedMutationsForCurrentVersion: prerenderedMutations[graphqlVersion],
     explorerUrl,
     changelog,
   }

middleware/contextualizers/graphql.js

@@ -81,6 +81,16 @@ export default async function renderPage(req, res, next) {
       context.renderedPage + req.context.graphql.prerenderedInputObjectsForCurrentVersion.html
   }
 
+  // handle special-case prerendered GraphQL mutations page
+  if (req.pagePath.endsWith('graphql/reference/mutations')) {
+    // concat the markdown source miniToc items and the prerendered miniToc items
+    context.miniTocItems = context.miniTocItems.concat(
+      req.context.graphql.prerenderedMutationsForCurrentVersion.miniToc
+    )
+    context.renderedPage =
+      context.renderedPage + req.context.graphql.prerenderedMutationsForCurrentVersion.html
+  }
+
   // Create string for <title> tag
   context.page.fullTitle = context.page.titlePlainText
 

middleware/render-page.js

@@ -9,8 +9,7 @@ import { allVersions } from '../../lib/all-versions.js'
 import processPreviews from './utils/process-previews.js'
 import processUpcomingChanges from './utils/process-upcoming-changes.js'
 import processSchemas from './utils/process-schemas.js'
-import prerenderObjects from './utils/prerender-objects.js'
-import prerenderInputObjects from './utils/prerender-input-objects.js'
+import prerender from './utils/prerender-graphql.js'
 import { prependDatedEntry, createChangelogEntry } from './build-changelog.js'
 import loadData from '../../lib/site-data.js'
 
@@ -36,6 +35,7 @@ async function main() {
   const upcomingChangesJson = {}
   const prerenderedObjects = {}
   const prerenderedInputObjects = {}
+  const prerenderedMutations = {}
 
   const siteData = loadData()
 
@@ -83,11 +83,22 @@ async function main() {
 
     // 4. PRERENDER OBJECTS HTML
     // because the objects page is too big to render on page load
-    prerenderedObjects[graphqlVersion] = await prerenderObjects(context)
+    prerenderedObjects[graphqlVersion] = await prerender(context, 'objects', 'graphql-object.html')
 
     // 5. PRERENDER INPUT OBJECTS HTML
     // because the objects page is too big to render on page load
-    prerenderedInputObjects[graphqlVersion] = await prerenderInputObjects(context)
+    prerenderedInputObjects[graphqlVersion] = await prerender(
+      context,
+      'inputObjects',
+      'graphql-input-object.html'
+    )
+
+    // Prerender mutations
+    prerenderedMutations[graphqlVersion] = await prerender(
+      context,
+      'mutations',
+      'graphql-mutation.html'
+    )
 
     // 6. UPDATE CHANGELOG
     if (allVersions[version].nonEnterpriseDefault) {
@@ -118,6 +129,10 @@ async function main() {
     prerenderedInputObjects,
     path.join(graphqlStaticDir, 'prerendered-input-objects.json')
   )
+  await updateStaticFile(
+    prerenderedMutations,
+    path.join(graphqlStaticDir, 'prerendered-mutations.json')
+  )
 
   // Ensure the YAML linter runs before checkinging in files
   execSync('npx prettier -w "**/*.{yml,yaml}"')

script/graphql/update-files.js

@@ -0,0 +1,30 @@
+#!/usr/bin/env node
+import fs from 'fs/promises'
+import path from 'path'
+import cheerio from 'cheerio'
+import { liquid } from '../../../lib/render-content/index.js'
+import getMiniTocItems from '../../../lib/get-mini-toc-items.js'
+import rewriteLocalLinks from '../../../lib/rewrite-local-links.js'
+const includes = path.join(process.cwd(), 'includes')
+
+export default async function prerender(context, type, includeFilename) {
+  const htmlArray = []
+
+  const includeFile = await fs.readFile(path.join(includes, includeFilename), 'utf8')
+  // render the layout for every object
+  for (const item of context.graphql.schemaForCurrentVersion[type]) {
+    context.item = item
+    const itemHtml = await liquid.parseAndRender(includeFile, context)
+    const $ = cheerio.load(itemHtml, { xmlMode: true })
+    rewriteLocalLinks($, context.currentVersion, context.currentLanguage)
+    const htmlWithVersionedLinks = $.html()
+    htmlArray.push(htmlWithVersionedLinks)
+  }
+
+  const html = htmlArray.join('\n')
+
+  return {
+    html: html,
+    miniToc: getMiniTocItems(html),
+  }
+}