Creating Lists of Content

You'll probably need to provide users with lists so they can see what content is available in your application. Those lists will need to be kept up-to-date as content is added, edited, or removed. This requires querying GraphQL to get the titles and paths for pages you want to link to, and then using the Link component provided by gatsby-link to create clickable links to those pages at build time.

In this tutorial we'll:

  • Update the src/pages/index.js file used to generate the front page of your application so that it contains a dynamically generated list of recipes
  • Create a new RecipeList component that uses a StaticQuery to generate a short list of recipes to display at the bottom of each recipe page
  • Use the Gatsby Link component to create blazing fast internal links within our application.

By the end of this tutorial you'll know how to use both page queries and static queries to generate lists of content links from the GraphQL database at build time.

Sign in with your Osio Labs account
to gain instant access to our entire library.