/

Gatsby

reactgraphql
Table of contents
  • wrapRootElement
  • GraphQL
  • Misc

wrapRootElement

This is where Providers would be setup, think Redux etc

jsx
// gatsby-browser.js
const React = require('react')
const { Provider } = require('react-redux')
const createStore = require('./src/state/createStore')
const store = createStore()
exports.wrapRootElement = ({ element }) => {
return <Provider store={store}>{element}</Provider>
}

More info here

GraphQL

Group deeply nested fields together

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

Output

json
{
"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:

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

or this

yml
---
title: Gatsby
---

Then query for items that don't have tags set

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

Misc

SEO component

Schema.org component

Want to make your own site like this?
Try gatsby-theme-code-notes by Zander Martineau.
Notes on code. My second brain, by Zander Martineau.