Gatsby
Up and Running with Gatsby: Markdown & MDX

Events Index Query

Mute
Current Time 0:00
/
Duration Time 0:00
Loaded: 0%
Progress: 0%
Stream TypeLIVE
Remaining Time -0:00
 
PRO

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