fetch repos on build time

gatsby-node.js

@@ -1,7 +1,13 @@
+/* eslint-disable no-console */
+
 const path = require('path')
 const remark = require('remark')
 const markdown = require('remark-parse')
 const html = require('remark-html')
+const axios = require('axios')
+const fs = require('fs')
+const yaml = require('js-yaml')
+const reposYaml = yaml.load(fs.readFileSync('./content/repos.yml', 'utf8'))
 
 function truncate(n, useWordBoundary) {
   if (this.length <= n) {
@@ -15,6 +21,30 @@ function truncate(n, useWordBoundary) {
   )
 }
 
+async function getGithubRepos(data) {
+  const allRepos = await axios.get(
+    `https://api.github.com/users/${data.user}/repos?per_page=100`
+  )
+  const repos = allRepos.data
+    // filter by what's defined in content/repos.yml
+    .filter(({ name }) => data.repos.includes(name))
+    // sort by pushed to, newest first
+    .sort((a, b) => b.pushed_at.localeCompare(a.pushed_at))
+
+  return repos
+}
+
+let repos
+
+exports.onPreBootstrap = async () => {
+  try {
+    repos = await getGithubRepos(reposYaml[0])
+    console.log(`success getGithubRepos: ${repos.length} repos`)
+  } catch (error) {
+    console.error(error.message)
+  }
+}
+
 exports.onCreateNode = ({ node, actions }) => {
   const { createNodeField } = actions
 
@@ -53,6 +83,20 @@ exports.onCreateNode = ({ node, actions }) => {
   }
 }
 
+exports.onCreatePage = async ({ page, actions }) => {
+  const { createPage } = actions
+
+  // Add repos to front page's context
+  if (page.path === '/')
+    createPage({
+      ...page,
+      context: {
+        ...page.context,
+        repos
+      }
+    })
+}
+
 //
 // Create project pages from projects.yml
 //

src/components/organisms/Repositories.jsx

@@ -1,43 +1,20 @@
 import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
-import axios from 'axios'
+
 import Repository from '../molecules/Repository'
 import styles from './Repositories.module.scss'
 
 export default class Repositories extends PureComponent {
   static propTypes = {
-    user: PropTypes.string.isRequired,
     repos: PropTypes.array.isRequired
   }
 
-  state = { repos: [] }
-
-  async componentDidMount() {
-    try {
-      const repos = await this.getGithubRepos(this.props.user)
-      this.setState({ repos })
-    } catch (error) {
-      console.error(error.message) // eslint-disable-line
-    }
-  }
-
-  async getGithubRepos(user) {
-    const allRepos = await axios.get(
-      `https://api.github.com/users/${user}/repos?per_page=100`
-    )
-    const repos = allRepos.data
-      .filter(({ name }) => this.props.repos.includes(name))
-      .sort((a, b) => b.pushed_at.localeCompare(a.pushed_at)) // sort by pushed to, newest first
-
-    return repos
-  }
-
   render() {
     return (
       <section className={styles.section}>
         <h1 className={styles.sectionTitle}>Open Source Projects</h1>
         <div className={styles.repos}>
-          {this.state.repos.map(repo => (
+          {this.props.repos.map(repo => (
             <Repository key={repo.name} repo={repo} />
           ))}
         </div>

src/pages/index.jsx

@@ -20,12 +20,13 @@ function getImageCount(images, slug) {
 
 export default class Home extends PureComponent {
   static propTypes = {
-    data: PropTypes.object,
+    data: PropTypes.object.isRequired,
-    location: PropTypes.object
+    pageContext: PropTypes.object.isRequired,
+    location: PropTypes.object.isRequired
   }
 
   render() {
-    const { data } = this.props
+    const { data, pageContext } = this.props
     const projects = data.allProjectsYaml.edges
     const images = data.projectImageFiles.edges
 
@@ -58,7 +59,7 @@ export default class Home extends PureComponent {
           })}
         </div>
 
-        <Repositories user={data.reposYaml.user} repos={data.reposYaml.repos} />
+        <Repositories repos={pageContext.repos} />
       </>
     )
   }
@@ -91,10 +92,5 @@ export const IndexQuery = graphql`
         }
       }
     }
-
-    reposYaml {
-      user
-      repos
-    }
   }
 `