Transformer Plugin

Transformer Plugins

Build a Page with Data from Transformer Plugin

bash
npm i gatsby-transformer-remark

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',
  ],
};

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

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/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?

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")
        }
      }
    }
  }
}

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

bash
touch src/pages/blogs.js

src/pages/blogs.js
jsx
import { graphql } from 'gatsby';
import * as 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;

src/pages/blogs.js
jsx
import { graphql } from 'gatsby';
import * as 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;