A VS Code Snippet for Generating Gatsby Components with Static Query

Having to re-write the same boilerplate code for a React component with StaticQuery from Gatsby can get tiresome. Which is why I recently made a small snippet for VS Code in order to automate the process.

Go to File > Preferences > User Snippets (Or Code > Preferences > User Snippets` on MacOS), choose JavaScript, and paste the following snippet inside of the curly braces:

JSON
"Gatsby Static Query": {
"prefix": "gatstaq",
"body": [
"import React from 'react'",
"import { StaticQuery, graphql } from 'gatsby'\n",
"const ${1/(.*)/${1:/capitalize}/} = ({ data }) => (\n\t$0\n)\n",
"const ${1:page}Query = graphql\n\t\n\n",
"export default () => (\n\t<StaticQuery query={${1:page}Query} render={data => <${1/(.*)/${1:/capitalize}/} data={data} />} />\n)\n"
]
}


Originally posted on my blog: Gatsby StaticQuery Snippet for VS Code

Comments

[Stephen Chiang]

Awesome, just what I needed! I suggest you could put it into a repo to share.