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:

2. Add a GraphQL query to the index.js file of your Gatsby site to fetch MarkdownRemark nodes:

3. Restart the development server and open GraphiQL at http://localhost:8000/___graphql. Explore the fields available on the MarkdownRemark node.

Additional resources

• Tutorial on transforming Markdown to HTML using gatsby-transformer-remark
• Browse available transformer plugins in the Gatsby plugin library

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:

2. 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

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

4. Run gatsby develop to start the development server.

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

Additional resources

• API docs, including grayscale and duotone query tips
• Gatsby Image docs
• Image processing examples