GraphQL Responsive Image

Overview

GraphQL Responsive Image is an extension of the GraphQL module drupal/graphql 3.0 which adds the possibility to render responsive drupal images using GraphQL.
This module provides a field plugin ResponsiveImage which contains the HTML markup of a rendered responsive image and a field plugin ResponsiveImageStructured that provides a structured response of image and srcsets. The responsive image style can be defined as an option in the GraphQL Query.

Usage

Expand your Media Image in your GraphQL query with the field ResponsiveImage or ResponsiveImageStructured, under style select the desired responsive image style.

query ($node: String!) {
  nodeById(id: $node) {
    ... on NodeContentPage {
      fieldHero {
        entity {
          ... on MediaImage {
            fieldMediaImage {
              ResponsiveImageStructured(style: IMAGESTYLE)
              ResponsiveImage(style: IMAGESTYLE)
            }
          }
        }
      }
    }
  }
}

ResponsiveImageStructured(style: IMAGESTYLE)

Gives you the Responsive Image as structured data back.

Usage (dumping the response object):
{{ dump(graphql.nodeById.fieldYOURIMAGEFIELD.entity.fieldMediaImage.ResponsiveImageStructured) }}.

ResponsiveImage(style: IMAGESTYLE)

Gives you the rendered entity of the Responsive Image back.
If you are using Twig, you can render the responsive image like this

Usage:
{{ graphql.nodeById.fieldYOURIMAGEFIELD.entity.fieldMediaImage.ResponsiveImage | raw }}
Note: This renders the repsonsive image with the according Responsive Image Drupal Template. It will use the Template from the theme if you override the template in your frontend theme.