Skip to main content
Community Plugin
View plugin on GitHub
See starters using this

gatsby-plugin-graphql-image

Description

Traverses a grapqhl schema sourced from the gatsby-source-graphql plugin and generates file nodes for use with gatsby-plugin-sharp and gatsby-transformer-sharp.

Dependencies

gatsby-source-graphql
gatsby-source-filesystem
gatsby-plugin-sharp
gatsby-transformer-sharp

How to install

npm i -D gatsby-plugin-graphql-image

Available options

schemaName - The typeName value of your graphql source from the gatsby-source-grapql plugin
imageFieldName - The name of the field that contains your image URLs

When do I use this plugin?

Include stories about when this plugin is helpful and/or necessary.

Examples of usage

{
  resolve: "gatsby-source-graphql",
  options: {
    typeName: "ROCKETMAKERS",
    fieldName: "rocketmakers",
    url: "https://rocketmakers.com/graphql"
  }
},
{
  resolve: 'gatsby-plugin-graphql-image',
  options: {
    schemaName: "ROCKETMAKERS",
    imageFieldName: "imageUrl"
  }
}

Limitations

Currently only supports one imageFieldName. Would be nice for this to take an array instead :)

Docs
Tutorials
Plugins
Blog
Showcase