Add local markdown files to GraphQL layer in Gridsome - gridsome

Question

In Gridsome, how do you add local markdown files to the GraphQL layer, so that you can add graphql to vue components?
At the time of writing, the Gridsome docs for adding data from local files are empty.

Answer 1

The starter-blog also has a working implementation: https://github.com/gridsome/gridsome-starter-blog/blob/master/gridsome.config.js
The gridsome repo for source-filesystem has some docs to help: https://github.com/gridsome/gridsome/tree/master/packages/source-filesystem
Docs imported here in case the link breaks in the future (but the link is likely to be more up to date).
#gridsome/source-filesystem
Transform files into content that can be fetched with GraphQL in your components.
Install
yarn add #gridsome/source-filesystem
npm install #gridsome/source-filesystem
Usage
module.exports = {
plugins: [
{
use: '#gridsome/source-filesystem',
options: {
path: 'blog/**/*.md',
typeName: 'BlogPost',
route: '/blog/:year/:month/:day/:slug'
}
}
]
}
A filesystem source will also require a transformer in order to parse the files. The example above is looking for a set of Markdown files, so in order to let Gridsome understand the content of the files, you must install #gridsome/transformer-remark as a dev dependency in your project. Gridsome will automatically transform the files for you as long as a transformer that supports your files is found in your package.json.
Options
path
Type: string required
Where to look for files. Should be a glob path.
typeName
Type: string
Default: 'FileNode'
The GraphQL type and template name. A .vue file in src/templates must match the typeName to have a template for it.
route
Type: string
Define a dynamic route if your source is able to have a certain pathname structure. This will generate a single route for all nodes from this source. Possible path params are year, month, day, slug or any custom field value. If omitted, a route for each file will be generated based on their path and filename. Read more about route params.
refs
Type: object
Define fields that will have a reference to another node. The referenced typeName is expected to exist. But a content type can also be created autmatically if you set create: true. Read more about references.
{
refs: {
// Reference to existing authors by id.
author: 'Author',
// Create a Tag content type and its nodes automatically.
tags: {
typeName: 'Tag',
route: '/tag/:id',
create: true
}
}
}
index
Type: Array
Default: ['index']
Define which files to consider as index files. These files will not have their filename appear in its route path and will become the main index.html file of the directory. Make sure there is only one possible index file per directory if multiple index names are defined.