Create a Fast Site with GatsbyJS

Transformer Plugin

Transformer Plugins

Transformer plugins are used to transform data provided by source plugins

Build a Page with Data from Transformer Plugin

bash
npm i gatsby-transformer-remark
gatsby-config.js
js
module.exports = {
plugins: [
'gatsby-plugin-sass',
{
resolve: 'gatsby-source-filesystem',
options: {
name: 'src',
path: `${__dirname}/src`,
},
},
{
resolve: 'gatsby-source-filesystem',
options: {
name: 'blogs',
path: `${__dirname}/blogs`,
},
},
'gatsby-transformer-remark',
],
};
bash
mkdir blogs
touch blogs/my-first-blog.md blogs/second-blog.md
blogs/my-first-blog.md
md
---
title: 'My First Blog'
date: '2019-07-06'
---
I'm so happy to write my first blog in Gatsby!
blogs/second-blog.md
md
---
title: 'My Second Blog'
date: '2019-07-07'
---
This is my second blog.
Cool right?

Try the following query in GraphiQL:

graphql
query {
allMarkdownRemark {
totalCount
edges {
node {
id
frontmatter {
title
date(formatString: "DD MMMM, YYYY")
}
}
}
}
}

Now we can add a page that display the title and date for our markdown files:

bash
touch src/pages/blogs.js
src/pages/blogs.js
jsx
import { graphql } from 'gatsby';
import React from 'react';
import { Layout } from '../components/layout';
const BlogsPage = ({ data }) => {
return (
<Layout>
<h1>Blogs</h1>
<p>{data.allMarkdownRemark.totalCount} posts</p>
{data.allMarkdownRemark.edges.map(({ node }) => (
<div key={node.id}>
<h3>
{node.frontmatter.title} <small>{node.frontmatter.date}</small>
</h3>
</div>
))}
</Layout>
);
};
export const query = graphql`
query AllBlogsQuery {
allMarkdownRemark {
totalCount
edges {
node {
id
frontmatter {
title
date(formatString: "DD MMMM, YYYY")
}
}
}
}
}
`;
export default BlogsPage;
Comments

There is no comment on this post yet.

Issue on this page? Report here