Filtering GraphQL Queries with Gatsby

Picking technologies that your team can work with is very important when delivering software. To deliver the site that you're reading this blog post on, we've chosen to use Gatsby. Gatsby is an open-source framework that builds on React. There are many great plugins available that help in solving a lot of the problems that come with building a web application that exists on the internet.

One of the reasons that we chose Gatsby is that it is easy to pull in data from various data sources. Gatsby uses GraphQL queries to enable this. Whether we are building a page or a reusable component, the technology allows us to query data and render it in markup. This allows us to separate the data from the functionality, which makes it easier to reuse code. It also allows us to be able to potentially change the source of the data one day without too much trouble.

Throughout building this and other Gatsby applications, we've found that filtering the data that we are querying with GraphQL to be necessary. In one application we built, there were multiple sections of the website that are driven from content sources of MDX files. Using gatsby-source-filesystem and gatsby-plugin-mdx, we were able to enable the data to be available in GraphQL queries.

With multiple sources of MDX files configured, we needed a way to filter the query results to only pull back data with appropriate attributes. Here's a query that existed before we introduced multiple sources of MDX files to query all blog posts:

allMdx(
        sort: { order: DESC, fields: [frontmatter___date] }
        limit: 1000
      ) {
        edges {
          node {
            id
            body
            excerpt
            slug
            frontmatter {
              date(formatString: "YYYY-MM-DD")
              author
              title
              imagePath
              isPublished
            }
          }
        }
      }
    }

This query returns data from the allMdx field on our site, sorts it in descending order on a frontmatter date field, and limits the total to 1000 results. Filtering it ended up being very easy to do - all we needed to do is add a filter argument to the allMdx field in the query:

allMdx(
        sort: { order: DESC, fields: [frontmatter___date] }
        limit: 1000
        filter:{ frontmatter: { type: { eq: "blog"}}}
      ) {
        edges {
          node {
            id
            body
            excerpt
            slug
            frontmatter {
              date(formatString: "YYYY-MM-DD")
              author
              title
              imagePath
              isPublished
            }
          }
        }
      }
    }

The filter argument ensures that this query only returns MDX-driven content where the value of type in the frontmatter is "blog". All blog posts have that value set in MDX file for each post, ensuring this query only returns blog posts.

GraphQL can seem daunting at first if you're not familiar with it, but it is really easy once you get the hang of it. This is just one thing we've learned along the way while using this technology.