update scaffold generator to use emptyAsUndefined when its needed

packages/cli/src/commands/generate/scaffold/__tests__/fixtures/schema.prisma

@@ -25,6 +25,7 @@ model Post {
   metadata   Json
   hugeNumber BigInt      @default(9007199254740992)
   favorites  Favorite[]
+  tag        Tag[]
 }
 
 model User {
@@ -63,4 +64,11 @@ model ExcludeDefault {
   updatedTime DateTime @updatedAt
   nowTime     DateTime @default(now())
   otherTime   DateTime
-}
+}
+
+model Tag {
+  id     Int    @id @default(autoincrement())
+  name   String @unique
+  post   Post?  @relation(fields: [postId], references: [id])
+  postId Int?
+}

packages/cli/src/commands/generate/scaffold/__tests__/shouldUseEmptyAsUndefined.test.js

@@ -0,0 +1,32 @@
+globalThis.__dirname = __dirname
+import path from 'path'
+
+// Load mocks
+import '../../../../lib/test'
+
+import { getDefaultArgs } from '../../../../lib'
+import { yargsDefaults as defaults } from '../../helpers'
+import * as scaffold from '../scaffold'
+
+jest.mock('execa')
+
+describe('relational form field', () => {
+  let form
+
+  beforeAll(async () => {
+    const files = await scaffold.files({
+      ...getDefaultArgs(defaults),
+      model: 'Tag',
+      tests: true,
+      nestScaffoldByModel: true,
+    })
+
+    const tagFormPath =
+      '/path/to/project/web/src/components/Tag/TagForm/TagForm.js'
+    form = files[path.normalize(tagFormPath)]
+  })
+
+  test("includes optional relational fields with an emptyAs('undefined')", () => {
+    expect(form).toMatch("emptyAs={'undefined'}")
+  })
+})

packages/cli/src/commands/generate/scaffold/scaffold.js

@@ -344,6 +344,8 @@ const modelRelatedVariables = (model) => {
     },
   }
 
+  const relations = relationsForModel(model).map((relation) => relation)
+
   const columns = model.fields
     .filter((field) => field.kind !== 'object')
     .map((column) => {
@@ -359,6 +361,10 @@ const modelRelatedVariables = (model) => {
           : null
       }
 
+      const isRelationalField =
+        column.name.endsWith('Id') &&
+        relations.some((relation) => column.name.includes(relation))
+      const isRequired = column.isRequired
       const isEnum = column.kind === 'enum'
       const isList = column.isList
       const enumType = isEnum && isList ? 'EnumList' : 'Enum'
@@ -386,6 +392,8 @@ const modelRelatedVariables = (model) => {
         values: column.enumValues || [],
         isList,
         isEnum,
+        isRequired,
+        isRelationalField,
       }
     })
   const editableColumns = columns

packages/cli/src/commands/generate/scaffold/templates/components/NameForm.tsx.template

@@ -100,8 +100,9 @@ const ${singularPascalName}Form = (props: ${singularPascalName}FormProps) => {
             name="${column.name}"
             ${column.defaultProp}={${column.deserializeFunction && column.deserializeFunction + '('}props.${singularCamelName}?.<%= column.name %>${column.deserializeFunction && ')'}}
             className="rw-input"
-            errorClassName="rw-input rw-input-error"<%= !column.validation ? '' : `
-            validation=${column.validation}` %>
+            errorClassName="rw-input rw-input-error"
+            <%= !column.validation ? '' : `validation=${column.validation}` %>
+            <%= column.isRelationalField && !column.isRequired ? `emptyAs={'undefined'}` : '' %>
           />
         <% } %>