Gatsby image from GraphQL schema

Use case

This plugin generates fileNodes in your graphQL schema and add File type to it. You can now use gatsby-plugin-sharp and gatsby-transformer-sharp in your GraphQL schema.


Add plugin to your project’s dependencies

yarn add gatsby-image-graphql-schema

Update and configure plugin in your gatsby-config file :

  resolve: "gatsby-image-graphql-schema",
  options: {
    imageNames: ["publicURL", "strapi_UploadFile.url"],
    schemaTypeName: "drupal",
  • imageNames is the name of the fields where your images url appears in your graphQL schema. With a dot separation (”.”), you can set a specific parent type for field name. In this example, the plugin will take all publicURL field names and only url field name with strapi_UploadFile parent type
  • schemaTypeName is the root schema type name where the plugin will search in to transform your images. (you must have the same value as the typeName options in the gatsby-source-graphql plugin).
  • baseUrl [optional] this plugin option allows you to concatenate image url with a base path (usefull when you only have the name of your images in your query result)


You can now query your images and they come with access to childImageSharp feature :

thumbnail {
  urlSharp {
    childImageSharp {
      fixed(width: 500, height: 500) {