Migrate to Netlify Today

Netlify announces the next evolution of Gatsby Cloud. Learn more

ContactSign Up
Community Plugin
View plugin on GitHub

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

images - An array of objects with these options

  • schemaName - The typeName value of your graphql source from the gatsby-source-grapql plugin
  • typeName - The actual graphQL typeName (you can query __typename in GraphiQL to get the actual typeName)
  • fieldName - The name of the field that contains your image URLs
  • baseUrl - (optional) A base url to use in case the values are not absolute paths

Examples of usage

{
  resolve: "gatsby-source-graphql",
  options: {
    typeName: "ROCKETMAKERS",
    fieldName: "rocketmakers",
    url: "https://rocketmakers.com/graphql"
  }
},
{
  resolve: 'gatsby-plugin-graphql-image',
  options: {
    images: [
      {
        schemaName: 'ROCKETMAKERS',
        typeName: 'ROCKETMAKERS_UploadFile',
        fieldName: 'url',
        baseUrl: 'https://rocketmakers.com',
      },
    ]
  }
}
© 2023 Gatsby, Inc.