Gatsby.js — GraphQL Queries

Gatsby is a static web site framework that’s based on React.

We can use it to create static websites from external data sources and more.

In this article, we’ll look at how to create a site with Gatsby.

Limit

We can limit the number of results that are returned in the GraphQL query results.

For instance, we can write:

{
  allMarkdownRemark(limit: 3) {
    totalCount
    edges {
      node {
        frontmatter {
          title
        }
      }
    }
  }
}

to get the first 3 Markdown posts with the title field.

Skip

We can skip over a number of results with the skip parameter:

{
  allMarkdownRemark(skip: 3) {
    totalCount
    edges {
      node {
        frontmatter {
          title
        }
      }
    }
  }
}

Filter

We can filter results with the filter parameter:

{
  allMarkdownRemark(filter: {frontmatter: {title: {ne: ""}}}) {
    totalCount
    edges {
      node {
        frontmatter {
          title
        }
      }
    }
  }
}

We set the filtet to an object with the title not equal to an empty string in the frontmatter .

We can combine multiple fields.

For instance, we can write:

{
  allMarkdownRemark(filter: {frontmatter: {title: {ne: ""}}, wordCount: {words: {gte: 1}}}) {
    totalCount
    edges {
      node {
        frontmatter {
          title
        }
      }
    }
  }
}

to search for Markdown posts that have title not equal to an empty string and with a word count bigger than or equal to 1.

Operators

The full list of operators include:

• eq: short for equal, must match the given data exactly
• ne: short for not equal, must be different from the given data
• regex: short for regular expression, must match the given pattern. Note that backslashes need to be escaped twice, so /\w+/ needs to be written as "/\\\\w+/".
• glob: short for global, allows us to use wildcard * which acts as a placeholder for any non-empty string
• in: short for in an array, must be an element of the array
• nin: short for not in an array, must not be an element of the array
• gt: short for greater than, must be greater than given value
• gte: short for greater than or equal, must be greater than or equal to the given value
• lt: short for less than, must be less than given value
• lte: short for less than or equal, must be less than or equal to the given value
• elemMatch: short for element match. We find the elements that match the given value with this operator.

Sort

We can sort items that are returned in the results.

To do this, we write:

{
  allMarkdownRemark(sort: {fields: [frontmatter___date], order: ASC}) {
    totalCount
    edges {
      node {
        frontmatter {
          title
          date
        }
      }
    }
  }
}

to add the order field to let us sort the frontmatter.date field.

Format Dates

We can format our results. To format dates, we write:

{
  allMarkdownRemark(filter: {frontmatter: {date: {ne: null}}}) {
    edges {
      node {
        frontmatter {
          title
          date(formatString: "dddd DD MMMM YYYY")
        }
      }
    }
  }
}

Then we get the full date, something like:

{
  "data": {
    "allMarkdownRemark": {
      "edges": [
        {
          "node": {
            "frontmatter": {
              "title": "My First Post",
              "date": "Wednesday 10 July 2019"
            }
          }
        }
      ]
    }
  },
  "extensions": {}
}

Conclusion

We can make various kinds of queries with Gatsby’s GraphQL API.