pre-render graphql input-objects

resolves #18269

Author: mikesurowiec

content/graphql/reference/input-objects.md

@@ -19,6 +19,5 @@ For example, [`CommitAuthor`](/graphql/reference/input-objects#commitauthor) tak
 
 For more information, see "[About mutations](/graphql/guides/forming-calls-with-graphql#about-mutations)."
 
-{% for item in graphql.schemaForCurrentVersion.inputObjects %}
-  {% include graphql-input-object %}
-{% endfor %}
+<!-- this page is pre-rendered by scripts because it's too big to load dynamically -->
+<!-- see lib/graphql/static/prerendered-input-objects.json -->

lib/graphql/static/prerendered-input-objects.json

@@ -2,6 +2,7 @@ const previews = require('../../lib/graphql/static/previews')
 const upcomingChanges = require('../../lib/graphql/static/upcoming-changes')
 const changelog = require('../../lib/graphql/static/changelog')
 const prerenderedObjects = require('../../lib/graphql/static/prerendered-objects')
+const prerenderedInputObjects = require('../../lib/graphql/static/prerendered-input-objects')
 const allVersions = require('../../lib/all-versions')
 
 const explorerUrl = process.env.NODE_ENV === 'production'
@@ -26,6 +27,7 @@ module.exports = function graphqlContext (req, res, next) {
     previewsForCurrentVersion: previews[graphqlVersion],
     upcomingChangesForCurrentVersion: upcomingChanges[graphqlVersion],
     prerenderedObjectsForCurrentVersion: prerenderedObjects[graphqlVersion],
+    prerenderedInputObjectsForCurrentVersion: prerenderedInputObjects[graphqlVersion],
     explorerUrl,
     changelog
   }

middleware/contextualizers/graphql.js

@@ -107,6 +107,13 @@ module.exports = async function renderPage (req, res, next) {
     context.renderedPage = context.renderedPage + req.context.graphql.prerenderedObjectsForCurrentVersion.html
   }
 
+  // handle special-case prerendered GraphQL input objects page
+  if (req.path.endsWith('graphql/reference/input-objects')) {
+    // concat the markdown source miniToc items and the prerendered miniToc items
+    context.miniTocItems = context.miniTocItems.concat(req.context.graphql.prerenderedInputObjectsForCurrentVersion.miniToc)
+    context.renderedPage = context.renderedPage + req.context.graphql.prerenderedInputObjectsForCurrentVersion.html
+  }
+
   // Create string for <title> tag
   context.page.fullTitle = context.page.title
 

middleware/render-page.js

@@ -14,6 +14,7 @@ const processPreviews = require('./utils/process-previews')
 const processUpcomingChanges = require('./utils/process-upcoming-changes')
 const processSchemas = require('./utils/process-schemas')
 const prerenderObjects = require('./utils/prerender-objects')
+const prerenderInputObjects = require('./utils/prerender-input-objects')
 const { prependDatedEntry, createChangelogEntry } = require('./build-changelog')
 
 // check for required PAT
@@ -42,6 +43,7 @@ async function main () {
   const previewsJson = {}
   const upcomingChangesJson = {}
   const prerenderedObjects = {}
+  const prerenderedInputObjects = {}
 
   for (const version of versionsToBuild) {
     // Get the relevant GraphQL name  for the current version
@@ -77,7 +79,11 @@ async function main () {
     // because the objects page is too big to render on page load
     prerenderedObjects[graphqlVersion] = await prerenderObjects(schemaJsonPerVersion, version)
 
-    // 5. UPDATE CHANGELOG
+    // 5. PRERENDER INPUT OBJECTS HTML
+    // because the objects page is too big to render on page load
+    prerenderedInputObjects[graphqlVersion] = await prerenderInputObjects(schemaJsonPerVersion, version)
+
+    // 6. UPDATE CHANGELOG
     if (allVersions[version].nonEnterpriseDefault) {
       // The Changelog is only build for free-pro-team@latest
       const changelogEntry = await createChangelogEntry(
@@ -96,6 +102,7 @@ async function main () {
   updateStaticFile(previewsJson, path.join(graphqlStaticDir, 'previews.json'))
   updateStaticFile(upcomingChangesJson, path.join(graphqlStaticDir, 'upcoming-changes.json'))
   updateStaticFile(prerenderedObjects, path.join(graphqlStaticDir, 'prerendered-objects.json'))
+  updateStaticFile(prerenderedInputObjects, path.join(graphqlStaticDir, 'prerendered-input-objects.json'))
 
   // Ensure the YAML linter runs before checkinging in files
   execSync('npx prettier -w "**/*.{yml,yaml}"')

script/graphql/update-files.js

@@ -0,0 +1,40 @@
+const fs = require('fs')
+const path = require('path')
+const cheerio = require('cheerio')
+const { liquid } = require('../../../lib/render-content')
+const getMiniTocItems = require('../../../lib/get-mini-toc-items')
+const rewriteLocalLinks = require('../../../lib/rewrite-local-links')
+const includes = path.join(process.cwd(), 'includes')
+const inputObjectIncludeFile = fs.readFileSync(path.join(includes, 'graphql-input-object.html'), 'utf8')
+// TODO need to localize
+const currentLanguage = 'en'
+
+module.exports = async function prerenderInputObjects (schemaJsonPerVersion, version) {
+  const site = await require('../../../lib/site-data')()
+
+  // create a bare minimum context for rendering the graphql-object.html layout
+  const context = {
+    currentLanguage,
+    site: site[currentLanguage].site,
+    graphql: { schemaForCurrentVersion: schemaJsonPerVersion }
+  }
+
+  const inputObjectsArray = []
+
+  // render the graphql-object.html layout for every object
+  for (const inputObject of schemaJsonPerVersion.inputObjects) {
+    context.item = inputObject
+    const inputObjectHtml = await liquid.parseAndRender(inputObjectIncludeFile, context)
+    const $ = cheerio.load(inputObjectHtml, { xmlMode: true })
+    rewriteLocalLinks($, version, currentLanguage)
+    const htmlWithVersionedLinks = $.html()
+    inputObjectsArray.push(htmlWithVersionedLinks)
+  }
+
+  const inputObjectsHtml = inputObjectsArray.join('\n')
+
+  return {
+    html: inputObjectsHtml,
+    miniToc: getMiniTocItems(inputObjectsHtml)
+  }
+}