This project shows a simple demonstration of GraphQL and Vue (built with Gridsome and Tailwind).
You can find a live version at https://graphql.crbroughton.me/
vue-lazyload is used to ensure images are only loaded when the users viewport is close to the image.
The project relies on GraphQL to fetch image URLS, article URLS and the year of the mission.
Those details are then passed to their relevant children components as props.
Clicking on any of the images shows a popup that details the above, with a clickable article link for the relevant mission.
Below you can find the GraphQL api that was used for this project: