Okay, we're ready to add our five next events to our Events page (events.mdx).

The first thing we need is our query. In the video, we build this query using the GraphiQL Explorer. We end up with this:

query {
    allMdx(limit: 5, sort: { fields: frontmatter___date, order: DESC }) {
      nodes {
        excerpt
        fields {
          slug
        }
        frontmatter {
          category
          date(formatString: "MM/DD/YYYY")
          title
        }
        id
      }
    }
  }

We can then use this query as a page query at the bottom of events.mdx:

export const pageQuery = graphql`
  query {
    allMdx(limit: 5, sort: { fields: frontmatter___date, order: DESC }) {
      nodes {
        excerpt
        fields {
          slug
        }
        frontmatter {
          category
          date(formatString: "MM/DD/YYYY")
          title
        }
        id
      }
    }
  }
`

Now let's use the data in our component. We'll do that in the next video!

 

I finished! On to the next chapter