Steps to add data to a Gatsby project, using GrahQL to query an external API at build time:
sourceNode to gatsby-node.jsexporting a query property, in addtion of the default export.| 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 | |
| } | |
| } | |
| } | |
| ` |
| 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 | |
| } |