Add data to Gatsby pages using GraphQL

README.md

Steps to add data to a Gatsby project, using GrahQL to query an external API at build time:

• add sourceNode to gatsby-node.js
• Check the data from the Graphiql UI: http://localhost:8000/___graphql
• Inject data to components or template by exporting a query property, in addtion of the default export.

DevelopersTemplate.js

import React from 'react'
import SalariesBlock from '../blocks/SalariesBlock'
import ExperienceBlock from '../blocks/ExperienceBlock'
import Meta from '../elements/Meta'

const DevelopersTemplate = props => (
  <div className="template">
    <Meta section={props.section} subSection="developers" />
    <SalariesBlock {...props} />
    <ExperienceBlock {...props} />
  </div>
)

export default DevelopersTemplate

export const query = graphql`
  query projects {
    github {
      count
      childrenProject {
        name
        stars
        homepage
        description
        slug
      }
    }
  }
`

gatsby-node.js

exports.sourceNodes = async ({ boundActionCreators }) => {
  const { createNode } = boundActionCreators
  // Create nodes here, generally by downloading data
  // from a remote API.
  console.log('>>> Fetching...')
  const url = 'https://bestofjs-api-dev.firebaseapp.com/stateofjs2017.json'
  const response = await axios.get(url)
  const projects = response.data.projects.slice(0, 5)
  console.log('>>> Done!', projects.length)
  projects.forEach(project =>
    createNode({
      id: project.slug,
      name: project.name,
      slug: project.slug,
      description: project.description,
      homepage: project.homepage,
      stars: project.stars,
      parent: 'github',
      children: [],
      internal: { contentDigest: 'yyy', type: 'project' }
    })
  )
  createNode({
    id: 'github',
    count: projects.length,
    children: projects.map(project => project.slug),
    parent: null,
    internal: { contentDigest: 'xxx', type: 'github' }
  })

  // We're done, return.
  return
}