Recipes: Transforming Data

Transforming data in Gatsby is plugin-driven. Transformer plugins take data fetched using source plugins, and process it into something more usable (e.g. JSON into JavaScript objects, and more).

Transforming Markdown into HTML

The gatsby-transformer-remark plugin can transform Markdown files to HTML.

Prerequisites

  • A Gatsby site with gatsby-config.js and an index.js page
  • A Markdown file saved in your Gatsby site src directory
  • A source plugin installed, such as gatsby-source-filesystem
  • The gatsby-transformer-remark plugin installed

Directions

  1. Add the transformer plugin in your gatsby-config.js:
  1. Add a GraphQL query to the index.js file of your Gatsby site to fetch MarkdownRemark nodes:
  1. Restart the development server and open GraphiQL at http://localhost:8000/___graphql. Explore the fields available on the MarkdownRemark node.

Additional resources

Transforming images into grayscale using GraphQL

Prerequisites

  • A Gatsby site with a gatsby-config.js file and an index.js page
  • The gatsby-image, gatsby-transformer-sharp, and gatsby-plugin-sharp packages installed
  • A source plugin installed, such as gatsby-source-filesystem
  • An image (.jpg, .png, .gif, .svg, etc.) in the src/images folder

Directions

  1. Edit your gatsby-config.js file to source images and configure plugins for Gatsby’s GraphQL data layer. A common approach is to source them from an images directory using the gatsby-source-filesystem plugin:
  1. Query your image using GraphQL and apply a grayscale transformation to the image inline. The relativePath should be relative to the path you configured in gatsby-source-filesystem.

Note: You can find these and other parameters in your GraphQL playground located at http://localhost:8000/__graphql

  1. Next import the Img component from “gatsby-image”. You’ll use this inside your JSX to display the image.

  1. Run gatsby develop to start the development server.

  2. View your image in the browser: http://localhost:8000/

Additional resources

Edit this page on GitHub