Skip to content

Instantly share code, notes, and snippets.

@nicoandrade
Created October 23, 2019 05:44
Show Gist options
  • Save nicoandrade/fd73ebef7766de819780488ae2cbc245 to your computer and use it in GitHub Desktop.
Save nicoandrade/fd73ebef7766de819780488ae2cbc245 to your computer and use it in GitHub Desktop.
Gatsby gatsby-transformer-sharp fragments
/**
* This is a list of the parameters for the gatsby-transformer-sharp fragments
* If you are trying to use, for example, '...GatsbyImageSharpFluid' and you are getting this error:
* Unknown fragment "GatsbyImageSharpFluid"
* Just use the parameters directly
*
* The simplest set of fields for fixed sharp images
* @type {Fragment}
* @example
* childImageSharp {
* fixed {
* ...GatsbyImageSharpFixed
* # ^ identical to using the following fields:
* # base64
* # width
* # height
* # src
* # srcSet
* }
* }
*/
export const GatsbyImageSharpFixed = graphql`
fragment GatsbyImageSharpFixed on ImageSharpFixed {
base64
width
height
src
srcSet
}
`
/**
* Traced SVG fixed images
* @type {Fragment}
*/
export const GatsbyImageSharpFixed_tracedSVG = graphql`
fragment GatsbyImageSharpFixed_tracedSVG on ImageSharpFixed {
tracedSVG
width
height
src
srcSet
}
`
/**
* Images using Webp for fixed images
* @type {Fragment}
*/
export const GatsbyImageSharpFixed_withWebp = graphql`
fragment GatsbyImageSharpFixed_withWebp on ImageSharpFixed {
base64
width
height
src
srcSet
srcWebp
srcSetWebp
}
`
/**
* Traced SVG images using Webp for fixed images
* @type {Fragment}
*/
export const GatsbyImageSharpFixed_withWebp_tracedSVG = graphql`
fragment GatsbyImageSharpFixed_withWebp_tracedSVG on ImageSharpFixed {
tracedSVG
width
height
src
srcSet
srcWebp
srcSetWebp
}
`
/**
* Fixed images without the blurred base64 image
* @type {Fragment}
*/
export const GatsbyImageSharpFixed_noBase64 = graphql`
fragment GatsbyImageSharpFixed_noBase64 on ImageSharpFixed {
width
height
src
srcSet
}
`
/**
* Fixed images without the blurred base64 image preferring Webp
* @type {Fragment}
*/
export const GatsbyImageSharpFixed_withWebp_noBase64 = graphql`
fragment GatsbyImageSharpFixed_withWebp_noBase64 on ImageSharpFixed {
width
height
src
srcSet
srcWebp
srcSetWebp
}
`
/**
* The simplest set of fields for fluid images
* @type {Fragment}
*/
export const GatsbyImageSharpFluid = graphql`
fragment GatsbyImageSharpFluid on ImageSharpFluid {
base64
aspectRatio
src
srcSet
sizes
}
`
/**
* Traced SVG fluid images
* @type {Fragment}
*/
export const GatsbyImageSharpFluid_tracedSVG = graphql`
fragment GatsbyImageSharpFluid_tracedSVG on ImageSharpFluid {
tracedSVG
aspectRatio
src
srcSet
sizes
}
`
/**
* Fluid images that prefer Webp
* @type {Fragment}
*/
export const GatsbyImageSharpFluid_withWebp = graphql`
fragment GatsbyImageSharpFluid_withWebp on ImageSharpFluid {
base64
aspectRatio
src
srcSet
srcWebp
srcSetWebp
sizes
}
`
/**
* Traced SVG fluid images that prefer Webp
* @type {Fragment}
*/
export const GatsbyImageSharpFluid_withWebp_tracedSVG = graphql`
fragment GatsbyImageSharpFluid_withWebp_tracedSVG on ImageSharpFluid {
tracedSVG
aspectRatio
src
srcSet
srcWebp
srcSetWebp
sizes
}
`
/**
* Traced SVG fluid images without the blurred base64 image
* @type {Fragment}
*/
export const GatsbyImageSharpFluid_noBase64 = graphql`
fragment GatsbyImageSharpFluid_noBase64 on ImageSharpFluid {
aspectRatio
src
srcSet
sizes
}
`
/**
* Traced SVG fluid images without the blurred base64 image that prefer Webp
* @type {Fragment}
*/
export const GatsbyImageSharpFluid_withWebp_noBase64 = graphql`
fragment GatsbyImageSharpFluid_withWebp_noBase64 on ImageSharpFluid {
aspectRatio
src
srcSet
srcWebp
srcSetWebp
sizes
}
`
// TODO: in v3 remove these legacy fragments
export const GatsbyImageSharpResolutions = graphql`
fragment GatsbyImageSharpResolutions on ImageSharpResolutions {
base64
width
height
src
srcSet
}
`
export const GatsbyImageSharpResolutions_tracedSVG = graphql`
fragment GatsbyImageSharpResolutions_tracedSVG on ImageSharpResolutions {
tracedSVG
width
height
src
srcSet
}
`
export const GatsbyImageSharpResolutions_withWebp = graphql`
fragment GatsbyImageSharpResolutions_withWebp on ImageSharpResolutions {
base64
width
height
src
srcSet
srcWebp
srcSetWebp
}
`
export const GatsbyImageSharpResolutions_withWebp_tracedSVG = graphql`
fragment GatsbyImageSharpResolutions_withWebp_tracedSVG on ImageSharpResolutions {
tracedSVG
width
height
src
srcSet
srcWebp
srcSetWebp
}
`
export const GatsbyImageSharpResolutions_noBase64 = graphql`
fragment GatsbyImageSharpResolutions_noBase64 on ImageSharpResolutions {
width
height
src
srcSet
}
`
export const GatsbyImageSharpResolutions_withWebp_noBase64 = graphql`
fragment GatsbyImageSharpResolutions_withWebp_noBase64 on ImageSharpResolutions {
width
height
src
srcSet
srcWebp
srcSetWebp
}
`
export const GatsbyImageSharpSizes = graphql`
fragment GatsbyImageSharpSizes on ImageSharpSizes {
base64
aspectRatio
src
srcSet
sizes
}
`
export const GatsbyImageSharpSizes_tracedSVG = graphql`
fragment GatsbyImageSharpSizes_tracedSVG on ImageSharpSizes {
tracedSVG
aspectRatio
src
srcSet
sizes
}
`
export const GatsbyImageSharpSizes_withWebp = graphql`
fragment GatsbyImageSharpSizes_withWebp on ImageSharpSizes {
base64
aspectRatio
src
srcSet
srcWebp
srcSetWebp
sizes
}
`
export const GatsbyImageSharpSizes_withWebp_tracedSVG = graphql`
fragment GatsbyImageSharpSizes_withWebp_tracedSVG on ImageSharpSizes {
tracedSVG
aspectRatio
src
srcSet
srcWebp
srcSetWebp
sizes
}
`
export const GatsbyImageSharpSizes_noBase64 = graphql`
fragment GatsbyImageSharpSizes_noBase64 on ImageSharpSizes {
aspectRatio
src
srcSet
sizes
}
`
export const GatsbyImageSharpSizes_withWebp_noBase64 = graphql`
fragment GatsbyImageSharpSizes_withWebp_noBase64 on ImageSharpSizes {
aspectRatio
src
srcSet
srcWebp
srcSetWebp
sizes
}
`
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment