diff --git a/packages/gatsby-plugin-image/src/resolver-utils.ts b/packages/gatsby-plugin-image/src/resolver-utils.ts index 64489611e4ef7..b21a3ab991ff2 100644 --- a/packages/gatsby-plugin-image/src/resolver-utils.ts +++ b/packages/gatsby-plugin-image/src/resolver-utils.ts @@ -51,24 +51,28 @@ export interface IGatsbyGraphQLResolverArgumentConfig { } export type IGatsbyImageResolverArgs = Pick< ISharpGatsbyImageArgs & IImageSizeArgs, - | "layout" - | "width" - | "height" | "aspectRatio" - | "sizes" - | "outputPixelDensities" - | "breakpoints" | "backgroundColor" + | "breakpoints" + | "height" + | "layout" + | "outputPixelDensities" + | "sizes" + | "width" > -export function getGatsbyImageResolver< +export function getGatsbyImageResolver( + resolve: GraphQLFieldResolver< + TSource, + TContext, + IGatsbyImageResolverArgs & TArgs + >, + extraArgs?: ObjectTypeComposerArgumentConfigMapDefinition +): ObjectTypeComposerFieldConfigAsObjectDefinition< TSource, TContext, - TArgs extends IGatsbyImageResolverArgs ->( - resolve: GraphQLFieldResolver, - extraArgs?: ObjectTypeComposerArgumentConfigMapDefinition -): ObjectTypeComposerFieldConfigAsObjectDefinition { + IGatsbyImageResolverArgs & TArgs +> { return { type: `JSON!`, args: { @@ -135,14 +139,32 @@ export function getGatsbyImageResolver< } } -export function getGatsbyImageFieldConfig< +export type IGatsbyImageFieldArgs = Pick< + ISharpGatsbyImageArgs & IImageSizeArgs, + | "aspectRatio" + | "backgroundColor" + | "breakpoints" + | "formats" + | "height" + | "layout" + | "outputPixelDensities" + | "placeholder" + | "sizes" + | "width" +> + +export function getGatsbyImageFieldConfig( + resolve: GraphQLFieldResolver< + TSource, + TContext, + IGatsbyImageFieldArgs & TArgs + >, + extraArgs?: ObjectTypeComposerArgumentConfigMapDefinition +): ObjectTypeComposerFieldConfigAsObjectDefinition< TSource, TContext, - TArgs extends IGatsbyImageResolverArgs ->( - resolve: GraphQLFieldResolver, - extraArgs?: ObjectTypeComposerArgumentConfigMapDefinition -): ObjectTypeComposerFieldConfigAsObjectDefinition { + IGatsbyImageFieldArgs & TArgs +> { return { type: `JSON!`, args: { diff --git a/packages/gatsby-source-shopify/src/gatsby-node.ts b/packages/gatsby-source-shopify/src/gatsby-node.ts index b0348f152133f..8777baa75c50f 100644 --- a/packages/gatsby-source-shopify/src/gatsby-node.ts +++ b/packages/gatsby-source-shopify/src/gatsby-node.ts @@ -7,10 +7,7 @@ import { SourceNodesArgs, } from "gatsby" import { makeResolveGatsbyImageData } from "./resolve-gatsby-image-data" -import { - getGatsbyImageResolver, - IGatsbyGraphQLResolverArgumentConfig, -} from "gatsby-plugin-image/graphql-utils" +import { getGatsbyImageFieldConfig } from "gatsby-plugin-image/graphql-utils" import { makeSourceFromOperation } from "./make-source-from-operation" export { createSchemaCustomization } from "./create-schema-customization" import { createNodeId } from "./node-builder" @@ -240,13 +237,6 @@ export function createResolvers( }: ShopifyPluginOptions ): void { if (!downloadImages) { - const args = { - placeholder: { - description: `Low resolution version of the image`, - type: `String`, - defaultValue: null, - } as IGatsbyGraphQLResolverArgumentConfig, - } const imageNodeTypes = [ `ShopifyProductImage`, `ShopifyProductVariantImage`, @@ -262,9 +252,8 @@ export function createResolvers( return { ...r, [`${typePrefix}${nodeType}`]: { - gatsbyImageData: getGatsbyImageResolver( - makeResolveGatsbyImageData(cache), - args + gatsbyImageData: getGatsbyImageFieldConfig( + makeResolveGatsbyImageData(cache) ), }, } diff --git a/packages/gatsby-source-shopify/src/resolve-gatsby-image-data.ts b/packages/gatsby-source-shopify/src/resolve-gatsby-image-data.ts index 188b6ccb5cd10..3ff2307e253dd 100644 --- a/packages/gatsby-source-shopify/src/resolve-gatsby-image-data.ts +++ b/packages/gatsby-source-shopify/src/resolve-gatsby-image-data.ts @@ -7,11 +7,10 @@ import { IImage, ImageFormat, } from "gatsby-plugin-image" +import { IGatsbyImageFieldArgs } from "gatsby-plugin-image/graphql-utils" import { readFileSync } from "fs" import { IShopifyImage, urlBuilder } from "./get-shopify-image" -type ImageLayout = "constrained" | "fixed" | "fullWidth" - type IImageWithPlaceholder = IImage & { placeholder: string } @@ -48,7 +47,7 @@ export function makeResolveGatsbyImageData(cache: any) { formats = [`auto`], layout = `constrained`, ...options - }: { formats: Array; layout: ImageLayout } + }: IGatsbyImageFieldArgs ): Promise { const remainingOptions = options as Record let [basename] = image.originalSrc.split(`?`)