fix(gatsby-source-shopify): use gatsby-plugin-image field creator

gatsbyjs · Jul 30, 2021 · a1e4581 · a1e4581
1 parent fde9d15
commit a1e4581
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 35 deletions.
diff --git 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<TValue = any> {
 }
 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<TSource, TContext, TArgs>(
+  resolve: GraphQLFieldResolver<
+    TSource,
+    TContext,
+    IGatsbyImageResolverArgs & TArgs
+  >,
+  extraArgs?: ObjectTypeComposerArgumentConfigMapDefinition<TArgs>
+): ObjectTypeComposerFieldConfigAsObjectDefinition<
   TSource,
   TContext,
-  TArgs extends IGatsbyImageResolverArgs
->(
-  resolve: GraphQLFieldResolver<TSource, TContext, TArgs>,
-  extraArgs?: ObjectTypeComposerArgumentConfigMapDefinition<TArgs>
-): ObjectTypeComposerFieldConfigAsObjectDefinition<TSource, TContext, TArgs> {
+  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<TSource, TContext, TArgs>(
+  resolve: GraphQLFieldResolver<
+    TSource,
+    TContext,
+    IGatsbyImageFieldArgs & TArgs
+  >,
+  extraArgs?: ObjectTypeComposerArgumentConfigMapDefinition<TArgs>
+): ObjectTypeComposerFieldConfigAsObjectDefinition<
   TSource,
   TContext,
-  TArgs extends IGatsbyImageResolverArgs
->(
-  resolve: GraphQLFieldResolver<TSource, TContext, TArgs>,
-  extraArgs?: ObjectTypeComposerArgumentConfigMapDefinition<TArgs>
-): ObjectTypeComposerFieldConfigAsObjectDefinition<TSource, TContext, TArgs> {
+  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
@@ -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 { shiftLeft } from "shift-left"
 import { pluginErrorCodes as errorCodes } from "./errors"
 import { makeSourceFromOperation } from "./make-source-from-operation"
@@ -232,13 +229,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`,
@@ -254,9 +244,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
@@ -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<ImageFormat>; layout: ImageLayout }
+    }: IGatsbyImageFieldArgs
   ): Promise<IGatsbyImageData> {
     const remainingOptions = options as Record<string, any>
     let [basename] = image.originalSrc.split(`?`)