fix image field type sub-field ordering

Author: dcousens

.changeset/same-field-order.md

@@ -0,0 +1,5 @@
+----
+'@keystone-6/core': patch
+----
+
+Fix `image` field type to use consistent sub-field ordering

examples/assets-local/schema.prisma

@@ -16,11 +16,11 @@ model Post {
   id                  String  @id @default(cuid())
   title               String  @default("")
   content             String  @default("")
+  banner_id           String?
   banner_filesize     Int?
-  banner_extension    String?
   banner_width        Int?
   banner_height       Int?
-  banner_id           String?
+  banner_extension    String?
   attachment_filesize Int?
   attachment_filename String?
 }

examples/assets-s3/schema.prisma

@@ -16,11 +16,11 @@ model Post {
   id                  String  @id @default(cuid())
   title               String  @default("")
   content             String  @default("")
+  banner_id           String?
   banner_filesize     Int?
-  banner_extension    String?
   banner_width        Int?
   banner_height       Int?
-  banner_id           String?
+  banner_extension    String?
   attachment_filesize Int?
   attachment_filename String?
 }

packages/core/src/fields/types/file/index.ts

@@ -1,10 +1,10 @@
 import {
-  fieldType,
   type FieldTypeFunc,
   type CommonFieldConfig,
   type BaseListTypeInfo,
   type KeystoneContext,
   type FileMetadata,
+  fieldType,
 } from '../../../types'
 import { graphql } from '../../..'
 
@@ -44,9 +44,7 @@ async function inputResolver (
   data: graphql.InferValueFromArg<typeof inputArg>,
   context: KeystoneContext
 ) {
-  if (data === null || data === undefined) {
-    return { filename: data, filesize: data }
-  }
+  if (data === null || data === undefined) return { filename: data, filesize: data }
   const upload = await data.upload
   return context.files(storage).getDataFromStream(upload.createReadStream(), upload.filename)
 }
@@ -111,10 +109,13 @@ export function file <ListTypeInfo extends BaseListTypeInfo>(config: FileFieldCo
       output: graphql.field({
         type: FileFieldOutput,
         resolve ({ value: { filesize, filename } }) {
-          if (filesize === null || filename === null) {
-            return null
+          if (filename === null) return null
+          if (filesize === null) return null
+          return {
+            filename,
+            filesize,
+            storage: config.storage
           }
-          return { filename, filesize, storage: config.storage }
         },
       }),
       __ksTelemetryFieldTypeName: '@keystone-6/file',

packages/core/src/fields/types/image/index.ts

@@ -1,11 +1,11 @@
 import {
   type BaseListTypeInfo,
-  fieldType,
   type FieldTypeFunc,
   type CommonFieldConfig,
   type ImageData,
   type ImageExtension,
   type KeystoneContext,
+  fieldType,
 } from '../../../types'
 import { graphql } from '../../..'
 import { SUPPORTED_IMAGE_EXTENSIONS } from './utils'
@@ -37,9 +37,9 @@ const ImageFieldOutput = graphql.object<ImageData & { storage: string }>()({
   fields: {
     id: graphql.field({ type: graphql.nonNull(graphql.ID) }),
     filesize: graphql.field({ type: graphql.nonNull(graphql.Int) }),
-    extension: graphql.field({ type: graphql.nonNull(ImageExtensionEnum) }),
     width: graphql.field({ type: graphql.nonNull(graphql.Int) }),
     height: graphql.field({ type: graphql.nonNull(graphql.Int) }),
+    extension: graphql.field({ type: graphql.nonNull(ImageExtensionEnum) }),
     url: graphql.field({
       type: graphql.nonNull(graphql.String),
       resolve (data, args, context) {
@@ -55,8 +55,15 @@ async function inputResolver (
   context: KeystoneContext
 ) {
   if (data === null || data === undefined) {
-    return { extension: data, filesize: data, height: data, id: data, width: data }
+    return {
+      id: data,
+      filesize: data,
+      width: data,
+      height: data,
+      extension: data,
+    }
   }
+
   const upload = await data.upload
   return context.images(storage).getDataFromStream(upload.createReadStream(), upload.filename)
 }
@@ -88,9 +95,9 @@ export function image <ListTypeInfo extends BaseListTypeInfo>(config: ImageField
       fields: {
         id: { kind: 'scalar', scalar: 'String', mode: 'optional' },
         filesize: { kind: 'scalar', scalar: 'Int', mode: 'optional' },
-        extension: { kind: 'scalar', scalar: 'String', mode: 'optional' },
         width: { kind: 'scalar', scalar: 'Int', mode: 'optional' },
         height: { kind: 'scalar', scalar: 'Int', mode: 'optional' },
+        extension: { kind: 'scalar', scalar: 'String', mode: 'optional' },
       },
     })({
       ...config,
@@ -133,23 +140,28 @@ export function image <ListTypeInfo extends BaseListTypeInfo>(config: ImageField
       },
       output: graphql.field({
         type: ImageFieldOutput,
-        resolve ({ value: { extension, filesize, height, id, width } }) {
-          if (
-            extension === null ||
-            !isValidImageExtension(extension) ||
-            filesize === null ||
-            height === null ||
-            width === null ||
-            id === null
-          ) {
-            return null
+        resolve ({
+          value: {
+            id,
+            filesize,
+            width,
+            height,
+            extension,
           }
+        }) {
+          if (id === null) return null
+          if (filesize === null) return null
+          if (width === null) return null
+          if (height === null) return null
+          if (extension === null) return null
+          if (!isValidImageExtension(extension)) return null
+
           return {
-            extension,
+            id,
             filesize,
-            height,
             width,
-            id,
+            height,
+            extension,
             storage: config.storage,
           }
         },

tests/sandbox/schema.prisma

@@ -39,11 +39,11 @@ model Thing {
   decimal                           Decimal?  @postgresql.Decimal(32, 8)
   bigInt                            BigInt?   @unique
   float                             Float?
+  image_id                          String?
   image_filesize                    Int?
-  image_extension                   String?
   image_width                       Int?
   image_height                      Int?
-  image_id                          String?
+  image_extension                   String?
   file_filesize                     Int?
   file_filename                     String?
   document                          Json      @default("[{\"type\":\"paragraph\",\"children\":[{\"text\":\"\"}]}]")