Member-only story

Gatsby.js — Site and Post Queries

John Au-Yeung
3 min readFeb 8, 2021

--

Photo by Domenico Loia on Unsplash

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.

Excerpt

We can get post excerpts from GraphQL queries.

To do this, we write:

{
allMarkdownRemark(filter: {frontmatter: {date: {ne: null}}}, limit: 5) {
edges {
node {
frontmatter {
title
}
excerpt(format: PLAIN, pruneLength: 200, truncate: true)
}
}
}
}

We add the excerpt function with the format , pruneLength , and truncate parameters.

format has the excerpt format.

pruneLength is the max length of the excerpt.

truncate indicates that we want to truncate the excerpt to the given length.

Sort, Filter, Limit, and Format Together

We can combine sort, filter, limit, and format together.

For instance, we can write:

{
allMarkdownRemark(limit: 3, filter: {frontmatter: {date: {ne: null}}}, sort: {fields: [frontmatter___date], order: DESC}) {
edges {
node {…

--

--

No responses yet