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 anindex.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
- Add the transformer plugin in your
gatsby-config.js
:
- Add a GraphQL query to the
index.js
file of your Gatsby site to fetchMarkdownRemark
nodes:
- Restart the development server and open GraphiQL at
http://localhost:8000/___graphql
. Explore the fields available on theMarkdownRemark
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 anindex.js
page - The
gatsby-image
,gatsby-transformer-sharp
, andgatsby-plugin-sharp
packages installed - A source plugin installed, such as
gatsby-source-filesystem
- An image (
.jpg
,.png
,.gif
,.svg
, etc.) in thesrc/images
folder
Directions
- 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 thegatsby-source-filesystem
plugin:
- Query your image using GraphQL and apply a grayscale transformation to the image inline. The
relativePath
should be relative to the path you configured ingatsby-source-filesystem
.
Note: You can find these and other parameters in your GraphQL playground located at http://localhost:8000/__graphql
- Next import the
Img
component from “gatsby-image”. You’ll use this inside your JSX to display the image.
Run
gatsby develop
to start the development server.View your image in the browser:
http://localhost:8000/
Additional resources
Edit this page on GitHub