Merge pull request #18676 from github/prerender-gql-input-objects

pre-render graphql input-objects

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,7 +14,9 @@ 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')
+const loadData = require('../../lib/site-data')
 
 // check for required PAT
 if (!process.env.GITHUB_TOKEN) {
@@ -36,12 +38,23 @@ const removeHiddenMembersScript = path.join(__dirname, './utils/remove-hidden-sc
 
 const versionsToBuild = Object.keys(allVersions)
 
+const currentLanguage = 'en'
+
 main()
 
 async function main () {
   const previewsJson = {}
   const upcomingChangesJson = {}
   const prerenderedObjects = {}
+  const prerenderedInputObjects = {}
+
+  const siteData = await loadData()
+
+  // create a bare minimum context for rendering the graphql-object.html layout
+  const context = {
+    currentLanguage,
+    site: siteData[currentLanguage].site
+  }
 
   for (const version of versionsToBuild) {
     // Get the relevant GraphQL name  for the current version
@@ -73,11 +86,19 @@ async function main () {
     const schemaJsonPerVersion = await processSchemas(safeForPublicSchema, safeForPublicPreviews)
     updateStaticFile(schemaJsonPerVersion, path.join(graphqlStaticDir, `schema-${graphqlVersion}.json`))
 
+    // Add some version specific data to the context
+    context.graphql = { schemaForCurrentVersion: schemaJsonPerVersion }
+    context.currentVersion = version
+
     // 4. PRERENDER OBJECTS HTML
     // because the objects page is too big to render on page load
-    prerenderedObjects[graphqlVersion] = await prerenderObjects(schemaJsonPerVersion, version)
+    prerenderedObjects[graphqlVersion] = await prerenderObjects(context)
+
+    // 5. PRERENDER INPUT OBJECTS HTML
+    // because the objects page is too big to render on page load
+    prerenderedInputObjects[graphqlVersion] = await prerenderInputObjects(context)
 
-    // 5. UPDATE CHANGELOG
+    // 6. UPDATE CHANGELOG
     if (allVersions[version].nonEnterpriseDefault) {
       // The Changelog is only build for free-pro-team@latest
       const changelogEntry = await createChangelogEntry(
@@ -96,6 +117,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,29 @@
+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')
+
+module.exports = async function prerenderInputObjects (context) {
+  const inputObjectsArray = []
+
+  // render the graphql-object.html layout for every object
+  for (const inputObject of context.graphql.schemaForCurrentVersion.inputObjects) {
+    context.item = inputObject
+    const inputObjectHtml = await liquid.parseAndRender(inputObjectIncludeFile, context)
+    const $ = cheerio.load(inputObjectHtml, { xmlMode: true })
+    rewriteLocalLinks($, context.currentVersion, context.currentLanguage)
+    const htmlWithVersionedLinks = $.html()
+    inputObjectsArray.push(htmlWithVersionedLinks)
+  }
+
+  const inputObjectsHtml = inputObjectsArray.join('\n')
+
+  return {
+    html: inputObjectsHtml,
+    miniToc: getMiniTocItems(inputObjectsHtml)
+  }
+}

script/graphql/utils/prerender-input-objects.js

@@ -6,27 +6,16 @@ const getMiniTocItems = require('../../../lib/get-mini-toc-items')
 const rewriteLocalLinks = require('../../../lib/rewrite-local-links')
 const includes = path.join(process.cwd(), 'includes')
 const objectIncludeFile = fs.readFileSync(path.join(includes, 'graphql-object.html'), 'utf8')
-// TODO need to localize
-const currentLanguage = 'en'
-
-module.exports = async function prerenderObjects (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 }
-  }
 
+module.exports = async function prerenderObjects (context) {
   const objectsArray = []
 
   // render the graphql-object.html layout for every object
-  for (const object of schemaJsonPerVersion.objects) {
+  for (const object of context.graphql.schemaForCurrentVersion.objects) {
     context.item = object
     const objectHtml = await liquid.parseAndRender(objectIncludeFile, context)
     const $ = cheerio.load(objectHtml, { xmlMode: true })
-    rewriteLocalLinks($, version, currentLanguage)
+    rewriteLocalLinks($, context.currentVersion, context.currentLanguage)
     const htmlWithVersionedLinks = $.html()
     objectsArray.push(htmlWithVersionedLinks)
   }