Also use guess to prefetch client-only articles

gatsby-node.js

@@ -8,7 +8,7 @@ exports.onCreateNode = ({ node, actions }) => {
     createNodeField({
       node,
       name: `slug`,
-      value: `/${slug(node.wikipediaId)}/`,
+      value: `/wiki/${slug(node.wikipediaId)}/`,
     })
   }
 }

package.json

@@ -20,6 +20,7 @@
     "gatsby-plugin-react-helmet": "next",
     "gatsby-plugin-typography": "next",
     "guess-webpack": "^0.0.3",
+    "node-fetch": "^2.1.2",
     "querystring": "^0.2.0",
     "react": "^16.3.2",
     "react-dom": "^16.3.2",

src/templates/article.js

@@ -1,13 +1,18 @@
 import React from "react"
 import Layout from "../components/layout"
 import { navigateTo } from "gatsby"
+import fetch from "node-fetch"
+const { guess } = require("guess-webpack/api")
 
 import "./article.css"
 
 const promiseCache = {}
 const htmlCache = {}
 
 const fetchArticle = name => {
+  if (typeof window === undefined) {
+    return
+  }
   if (!promiseCache[name]) {
     promiseCache[name] = fetch(
       `https://wikipedia-server.herokuapp.com/${name}`,
@@ -28,10 +33,15 @@ const fetchArticle = name => {
 
 export default class ArticleTemplate extends React.Component {
   render() {
+    const matches = guess(this.props.location.pathname)
+    Object.keys(matches).forEach(match => fetchArticle(match.slice(6)))
     let toRender = ``
     const articleName = this.props.location.pathname.slice(6)
+    if (this.props.location.pathname === `_`) {
+      return <div>hi</div>
+    }
     if (this.props.data.wikipediaArticle) {
-      toRender = this.props.data.wikipediaArticle
+      toRender = this.props.data.wikipediaArticle.rendered
     } else if (htmlCache[articleName]) {
       toRender = htmlCache[articleName]
     } else if (
@@ -58,8 +68,7 @@ export default class ArticleTemplate extends React.Component {
           onMouseMove={e => {
             const pathname = e.target.pathname
             if (pathname) {
-              fetchArticle(pathname.slice(6)).then(text =>
-              )
+              fetchArticle(pathname.slice(6))
             }
           }}
           dangerouslySetInnerHTML={{ __html: toRender }}

yarn.lock

@@ -3679,10 +3679,6 @@ fbjs@^0.8.14, fbjs@^0.8.16:
     setimmediate "^1.0.5"
     ua-parser-js "^0.7.9"
 
-fetch-jsonp@^1.1.3:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/fetch-jsonp/-/fetch-jsonp-1.1.3.tgz#9eb9e585ba08aaf700563538d17bbebbcd5a3db2"
-
 figures@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/figures/-/figures-2.0.0.tgz#3ab1a2d2a62c8bfb431a0c94cb797a2fce27c962"
@@ -5886,6 +5882,10 @@ node-fetch@^1.0.1:
     encoding "^0.1.11"
     is-stream "^1.0.1"
 
+node-fetch@^2.1.2:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.1.2.tgz#ab884e8e7e57e38a944753cec706f788d1768bb5"
+
 node-forge@0.7.5, node-forge@^0.7.4:
   version "0.7.5"
   resolved "https://registry.yarnpkg.com/node-forge/-/node-forge-0.7.5.tgz#6c152c345ce11c52f465c2abd957e8639cd674df"