Gatsby Nasa Example

This is an example using Gatsby with sample JSON data from NASA's Astronomy Picture of the Day (APOD) API.

Key features:

• Uses gatsby-source-filesystem and gatsby-transformer-json to parse local JSON data.
• Creates pages programmatically using Gatsby's createPage() function in gatsby-node.js.
• Implements basic pagination in gatsby-node.js.
• Uses components to render image and video media types.

Quickstart

npm install
npm run develop

Then visit http://localhost:8000/

Refreshing the data

A snapshot of the data is stored locally and then sourced by Gatsby.

To refresh the data:

export NASA_API_KEY="your_api_key"
export START_DATE=2024-01-01
export END_DATE=$(date +%Y-%m-%d)

curl -s "https://api.nasa.gov/planetary/apod?api_key=$NASA_API_KEY&start_date=$START_DATE&end_date=$END_DATE" | python3 -m json.tool >data/nasa.json

Future directions

Wouldn't it be great if the data was sourced directly from the API so we didn't have to refresh our local snapshot?

We could do that using Gatsby's Node APIs and in particular the sourceNodes extension point along with something like node-fetch.