Gatsby

reactgraphql

GraphQL

  • Gatsby GraphQL reference

Group deeply nested fields together

import { graphql, useStaticQuery } from 'gatsby'
export const useAllTags = () => {
const data = useStaticQuery(graphql`
{
allMdx {
tags: group(field: frontmatter___tags) {
tag: fieldValue
totalCount
}
}
}
`)
return data
}

Output

{
"data": {
"allMdx": {
"tags": [
{
"tag": "css",
"totalCount": 4
},
{
"tag": "devops",
"totalCount": 1
},
{
"tag": "git",
"totalCount": 1
},
{
"tag": "graphql",
"totalCount": 1
}
]
}
}
}

Graphql untagged

Given frontmatter like this:

---
title: Gatsby
tags:
- react
- graphql
---

or this

---
title: Gatsby
---

Then query for items that don't have tags set

query MyQuery {
allMdx(filter: { frontmatter: { tags: { eq: null } } }) {
edges {
node {
id
frontmatter {
title
tags
}
}
}
}
}

Misc

SEO component

Schema.org component

Edit this page
Want to make your own site like this? Try gatsby-theme-code-notes by Zander Martineau.
Notes on code. My memory bank.