feat: export object helper for gatsbyImageData

imgix · May 5, 2021 · b941e17 · b941e17
1 parent 6ae2e48
commit b941e17
Show file tree

Hide file tree

Showing 2 changed files with 93 additions and 50 deletions.
diff --git a/src/modules/gatsby-source-url/createImgixGatsbyImageDataFieldConfig.ts b/src/modules/gatsby-source-url/createImgixGatsbyImageDataFieldConfig.ts
@@ -54,6 +54,47 @@ const generateImageSource = (
   return { width, height, format: 'auto', src };
 };
 
+export type IBuildGatsbyImageDataBaseArgs = {
+  resolverArgs: IImgixGatsbyImageDataArgsResolved;
+  url: string;
+  dimensions: {
+    width: number;
+    height: number;
+  };
+  defaultParams?: Partial<IImgixParams>;
+  imgixClient: IImgixURLBuilder;
+};
+
+export const buildGatsbyImageDataBaseArgs = ({
+  resolverArgs,
+  url,
+  dimensions: { width, height },
+  defaultParams,
+  imgixClient,
+}: IBuildGatsbyImageDataBaseArgs) =>
+  ({
+    ...resolverArgs,
+    pluginName: `@imgix/gatsby`,
+    filename: url,
+    sourceMetadata: { width, height, format: 'auto' as ImageFormat },
+    // TODO: use breakpoints helper from gatsby-plugin-image hook
+    breakpoints:
+      resolverArgs.breakpoints ??
+      ImgixClient.targetWidths(
+        resolverArgs.srcSetMinWidth,
+        resolverArgs.srcSetMaxWidth,
+        resolverArgs.widthTolerance,
+      ),
+    formats: ['auto'] as ImageFormat[],
+    generateImageSource: generateImageSource(imgixClient),
+    options: {
+      imgixParams: {
+        ...defaultParams,
+        ...resolverArgs.imgixParams,
+      },
+    },
+  } as const);
+
 const resolveGatsbyImageData = <TSource>({
   resolveUrl,
   imgixClient,
@@ -72,7 +113,7 @@ const resolveGatsbyImageData = <TSource>({
   TSource,
   unknown,
   IImgixGatsbyImageDataArgsResolved
-> => async (rootValue, args): Promise<IGatsbyImageData | undefined> => {
+> => async (rootValue, resolverArgs): Promise<IGatsbyImageData | undefined> => {
   return pipe(
     Do(TE.taskEither)
       .sequenceSL(() => ({
@@ -97,43 +138,26 @@ const resolveGatsbyImageData = <TSource>({
           client: imgixClient,
         }),
       )
-      .letL(
-        'baseImageDataArgs',
-        ({ url, dimensions: { width, height } }) =>
-          ({
-            ...args,
-            pluginName: `@imgix/gatsby`,
-            filename: url,
-            sourceMetadata: { width, height, format: 'auto' as ImageFormat },
-            // TODO: use breakpoints helper from gatsby-plugin-image hook
-            breakpoints:
-              args.breakpoints ??
-              ImgixClient.targetWidths(
-                args.srcSetMinWidth,
-                args.srcSetMaxWidth,
-                args.widthTolerance,
-              ),
-            formats: ['auto'] as ImageFormat[],
-            generateImageSource: generateImageSource(imgixClient),
-            options: {
-              imgixParams: {
-                ...defaultParams,
-                ...args.imgixParams,
-              },
-            },
-          } as const),
+      .letL('baseImageDataArgs', ({ url, dimensions }) =>
+        buildGatsbyImageDataBaseArgs({
+          url,
+          dimensions,
+          resolverArgs,
+          defaultParams,
+          imgixClient,
+        }),
       )
       .bindL('placeholderData', ({ url, baseImageDataArgs }) => {
-        if (args.placeholder === 'blurred') {
+        if (resolverArgs.placeholder === 'blurred') {
           return pipe(
             getLowResolutionImageURL({
               ...baseImageDataArgs,
               options: {
                 ...baseImageDataArgs,
                 imgixParams: {
                   ...defaultParams,
-                  ...args.imgixParams,
-                  ...args.placeholderImgixParams,
+                  ...resolverArgs.imgixParams,
+                  ...resolverArgs.placeholderImgixParams,
                 },
               },
             }),
@@ -143,13 +167,13 @@ const resolveGatsbyImageData = <TSource>({
             })),
           );
         }
-        if (args.placeholder === 'dominantColor') {
+        if (resolverArgs.placeholder === 'dominantColor') {
           return pipe(
             fetchImgixDominantColor(cache)((params) =>
               imgixClient.buildURL(url, {
                 ...defaultParams,
-                ...args.imgixParams,
-                ...args.placeholderImgixParams,
+                ...resolverArgs.imgixParams,
+                ...resolverArgs.placeholderImgixParams,
                 ...params,
               }),
             ),
@@ -279,25 +303,25 @@ export const createImgixGatsbyImageFieldConfig = <TSource, TContext = {}>({
 };
 
 type IBuiltinGatsbyImageDataArgs = {
-  layout: IGatsbyImageHelperArgs['layout'];
-  width: IGatsbyImageHelperArgs['width'];
-  height: IGatsbyImageHelperArgs['height'];
-  aspectRatio: IGatsbyImageHelperArgs['aspectRatio'];
+  layout?: IGatsbyImageHelperArgs['layout'];
+  width?: IGatsbyImageHelperArgs['width'];
+  height?: IGatsbyImageHelperArgs['height'];
+  aspectRatio?: IGatsbyImageHelperArgs['aspectRatio'];
   // outputPixelDensities: IGatsbyImageHelperArgs['outputPixelDensities'];
-  breakpoints: IGatsbyImageHelperArgs['breakpoints'];
-  sizes: IGatsbyImageHelperArgs['sizes'];
-  backgroundColor: IGatsbyImageHelperArgs['backgroundColor'];
+  breakpoints?: IGatsbyImageHelperArgs['breakpoints'];
+  sizes?: IGatsbyImageHelperArgs['sizes'];
+  backgroundColor?: IGatsbyImageHelperArgs['backgroundColor'];
 };
 
 type IImgixGatsbyImageDataArgsResolved = {
-  layout: IGatsbyImageHelperArgs['layout'];
-  width: IGatsbyImageHelperArgs['width'];
-  height: IGatsbyImageHelperArgs['height'];
-  aspectRatio: IGatsbyImageHelperArgs['aspectRatio'];
+  layout?: IGatsbyImageHelperArgs['layout'];
+  width?: IGatsbyImageHelperArgs['width'];
+  height?: IGatsbyImageHelperArgs['height'];
+  aspectRatio?: IGatsbyImageHelperArgs['aspectRatio'];
   // outputPixelDensities: IGatsbyImageHelperArgs['outputPixelDensities'];
-  breakpoints: IGatsbyImageHelperArgs['breakpoints'];
-  sizes: IGatsbyImageHelperArgs['sizes'];
-  backgroundColor: IGatsbyImageHelperArgs['backgroundColor'];
+  breakpoints?: IGatsbyImageHelperArgs['breakpoints'];
+  sizes?: IGatsbyImageHelperArgs['sizes'];
+  backgroundColor?: IGatsbyImageHelperArgs['backgroundColor'];
   imgixParams?: ImgixUrlParams;
   placeholderImgixParams?: ImgixUrlParams;
   placeholder?: 'dominantColor' | 'blurred' | 'none';

diff --git a/src/pluginHelpers.ts b/src/pluginHelpers.ts
@@ -1,5 +1,10 @@
 import { FixedObject, FluidObject } from 'gatsby-image';
+import { generateImageData, IGatsbyImageData } from 'gatsby-plugin-image';
 import { createImgixURLBuilder } from './common/imgix-js-core-wrapper';
+import {
+  buildGatsbyImageDataBaseArgs,
+  IBuildGatsbyImageDataBaseArgs,
+} from './modules/gatsby-source-url/createImgixGatsbyImageDataFieldConfig';
 import * as internalObjectBuilders from './modules/gatsby-source-url/objectBuilders';
 import { buildImgixGatsbyTypes } from './modules/gatsby-source-url/typeBuilder';
 
@@ -23,8 +28,8 @@ export const createImgixGatsbyTypes = ({
 export const buildFluidObject = ({
   imgixClientOptions,
   ...args
-}: Exclude<internalObjectBuilders.BuildImgixFluidArgs, 'client'> & {
-  imgixClientOptions: Parameters<typeof createImgixURLBuilder>[0];
+}: Omit<internalObjectBuilders.BuildImgixFluidArgs, 'client'> & {
+  imgixClientOptions?: Parameters<typeof createImgixURLBuilder>[0];
 }): FluidObject => {
   return internalObjectBuilders.buildFluidObject({
     ...args,
@@ -35,11 +40,25 @@ export const buildFluidObject = ({
 export const buildFixedObject = ({
   imgixClientOptions,
   ...args
-}: Exclude<internalObjectBuilders.BuildImgixFixedArgs, 'client'> & {
-  imgixClientOptions: Parameters<typeof createImgixURLBuilder>[0];
+}: Omit<internalObjectBuilders.BuildImgixFixedArgs, 'client'> & {
+  imgixClientOptions?: Parameters<typeof createImgixURLBuilder>[0];
 }): FixedObject => {
   return internalObjectBuilders.buildImgixFixed({
     ...args,
     client: createImgixURLBuilder(imgixClientOptions),
   });
 };
+
+export const buildGatsbyImageDataObject = ({
+  imgixClientOptions,
+  ...args
+}: Omit<IBuildGatsbyImageDataBaseArgs, 'imgixClient'> & {
+  imgixClientOptions?: Parameters<typeof createImgixURLBuilder>[0];
+}): IGatsbyImageData => {
+  const imgixClient = createImgixURLBuilder(imgixClientOptions);
+  const generateImageDataArgs = buildGatsbyImageDataBaseArgs({
+    ...args,
+    imgixClient,
+  });
+  return generateImageData(generateImageDataArgs);
+};