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 {
frontmatter {
title
date(formatString: "dddd DD MMMM YYYY")
}
}
}
}
}
We just put them all in the allMarkdownRemark query and all the operations will be applied.
Query Variables
We don’t have to create queries with fixed values.
To reuse our queries, we can use query variables.
For example, we can write:
query GetBlogPosts($limit: Int, $filter: MarkdownRemarkFilterInput, $sort: MarkdownRemarkSortInput) {
allMarkdownRemark(limit: $limit, filter: $filter, sort: $sort) {
edges {
node {
frontmatter {
title
date(formatString: "dddd DD MMMM YYYY")
}
}
}
}
}
Then we can put the following the query variables screen:
{
"limit": 5,
"filter": {
"frontmatter": {
"date": {
"ne": null
}
}
},
"sort": {
"fields": "frontmatter___title",
"order": "DESC"
}
}
We set the limit , filter , and sort variables in the Query Variables pane to set the variable values.
Group
We can group values by fields.
To do this, we run:
{
allMarkdownRemark(filter: {frontmatter: {title: {ne: ""}}}) {
group(field: frontmatter___date) {
fieldValue
totalCount
edges {
node {
frontmatter {
title
}
}
}
}
nodes {
frontmatter {
title
date
}
}
}
}
We group the posts by date, so the results will be grouped by date.
Fragments
Fragments let us save frequently used queries for reuse.
We can apply fragments in our queries.
For instance, we can run:
fragment fragmentName on Site {
siteMetadata {
title
}
}
{
site {
...fragmentName
}
}
We add the fragmentName fragment and applied it to our site query.
It just gets the title metadata of the site.
Aliasing
We can alias queries to run 2 queries on the same data source.
For example, we can write:
{
someEntries: allMarkdownRemark(skip: 3, limit: 3) {
edges {
node {
frontmatter {
title
}
}
}
}
someMoreEntries: allMarkdownRemark(limit: 3) {
edges {
node {
frontmatter {
title
}
}
}
}
}
We have the someEntries and someMoreEntries queries and we get results from them.
Conclusion
We can make various kinds of GraphQL queries with Gatsby to get data for our site.
