Up and Running with Gatsby: Working with Data

Assignment: Static and Page Queries


You have two assignments in this video to help you understand data in Gatsby. To get started and follow along with the videos, you can just pick up with the code you were working on in the last chapter. If you got stuck, just use the sample code from the last chapter (/04-styling-in-gatsby/sample-code/gatsby-styling) as your starting point.

Here are your assignments:

  1. Add a page query to index.js. You could either pull in the same query from earlier in the chapter, add a property to the siteMetadata in gatsby-config.js, or do some exploring in GraphiQL to find some new data to include.
  2. Create a footer for the site that uses a static query. You'll need to create a footer component, add some data with a static query (maybe add a year to siteMetadata?), and add it to the layout. For bonus points, use Styled Components to add some styling.

By the way, you may need to restart the server a couple of times. Any time you change gatsby-config.js, you'll need to restart the server.

The finished sample code (the gatsby-data project) in the course repository also serves as the solution to the assignments. I'll also go over the solution in the next video.