Migrate to Netlify Today

Netlify announces the next evolution of Gatsby Cloud. Learn more

ContactSign Up
Community Plugin
View plugin on GitHub


gatsby-source-gravatar npm downloads npm code style: prettier

Gatsby plugin to source Gravatar URLs from emails.


yarn add gatsby-source-gravatar

# npm install --save gatsby-source-gravatar

How to Configure

In gatsby-config.js:

module.exports = {
  plugins: [
      resolve: `gatsby-source-gravatar`,
      options: {
        // Required.
        // A list of emails to create URLs for.
        emails: [
          // Could be just a strings,
          // Or an object, to pass an optional gravatar `query` parameter per email (see below).
          { email: `second@example.com`, query: `?size=128` },

        // Optional.
        // No query string is passed to gravatar by default.
        // But you can add your gravatar query parameters here.
        // See https://en.gravatar.com/site/implement/images/
        // If this is set, it will be the default for `emails` (see above) with no `query` options.
        query: `?size=64&m=dp`,

This configuration adds the the generated URLs into Gatsby’s GraphQL nodes. This means that, when integrated with libraries like gatsby-plugin-remote-images, it can be possible to get static Gravatar images that can be processed by gatsby-image.

How to Query

To get the Gravatar URL for one of the configured emails:

  gravatar(email: { eq: "first@example.com" }) {

To get all Gravatar URLs:

  allGravatar {
    edges {
      node {

        # also, available are:

Dynamic (On-Demand) Querying

Sometimes, we may not know which emails (and with what parameters) to include in gatsby-config.js ahead of time. So we can get the parsed URL using a method called toUrl:

import { useMemo } from 'react'
import { toUrl } from 'gatsby-source-gravatar'

function Profile({ email }) {
  const url = useMemo(() => toUrl(email, 'size=128'), [email])

  return <img src={url} alt={`${email}'s gravatar`} />


  • toUrl: receives an email (and an optional query) parameter and responds with an a Gravatar URL.
  • parseNode: receives an email (and an optional query) parameter and responds with a Node that can be passed to Gatsby’s createNode method (this also includes this plugin’s generated node data).
  • parseData: receives an email (and an optional query) parameter and responds with an object containing the url, email, hash and query.
  • digest: receives a string parameter and responds with its MD5 hash string.


Read up on this article to learn how to optimize Gravatars using gatsby-image.


Made with ♥ in Addis Ababa.

MIT License © 2020-2021 Kaleab S. Melkie.

© 2023 Gatsby, Inc.