Fix undefined ref errors in {val}ToLinkMap callbacks

packages/codegen-ui-react/lib/forms/form-renderer-helper/event-handler-props.ts

@@ -374,6 +374,7 @@ examples:
     );
     setCurrentPrimaryAuthorDisplayValue(label);
   }}
+  // For autocomplete field only
  */
 export function buildOnSelect({
   sanitizedFieldName,
@@ -407,7 +408,9 @@ export function buildOnSelect({
     nextCurrentDisplayValue = factory.createIdentifier(labelString);
 
     nextCurrentValue = getMatchEveryModelFieldCallExpression({
-      recordsArrayName: dataApi === 'GraphQL' ? `${fieldName}Records` : getRecordsName(model),
+      // Autocomplete is special and needs a ref to the model for DataStore because the
+      // fieldName will not be the same as when the reference was created.
+      recordsArrayName: getRecordsName(dataApi === 'GraphQL' ? fieldName : model),
       JSONName: idString,
     });
   }

packages/codegen-ui-react/lib/forms/form-renderer-helper/form-state.ts

@@ -72,8 +72,8 @@ export const getCurrentValueName = (fieldName: string) => {
 export const getCurrentDisplayValueName = (fieldName: string) =>
   `current${capitalizeFirstLetter(fieldName)}DisplayValue`;
 
-export const getRecordsName = (modelName: string, capitalized = false) =>
-  `${(capitalized ? capitalizeFirstLetter : lowerCaseFirst)(modelName)}Records`;
+export const getRecordsName = (name: string, capitalized = false) =>
+  `${(capitalized ? capitalizeFirstLetter : lowerCaseFirst)(name)}Records`;
 
 export const getRecordName = (modelName: string, capitalized = false) =>
   `${(capitalized ? capitalizeFirstLetter : lowerCaseFirst)(modelName)}Record`;
@@ -271,7 +271,9 @@ export const getUseStateHooks = (
 
     if (dataApi === 'GraphQL' && relationship) {
       acc.push(buildUseStateExpression(`${renderedFieldName}Loading`, factory.createFalse()));
-      acc.push(buildUseStateExpression(`${renderedFieldName}Records`, factory.createArrayLiteralExpression([], false)));
+      acc.push(
+        buildUseStateExpression(getRecordsName(renderedFieldName), factory.createArrayLiteralExpression([], false)),
+      );
       if (hasAutoComplete && !isModelDataType(fieldConfig[1])) {
         acc.push(
           buildUseStateExpression(

packages/codegen-ui-react/lib/forms/form-renderer-helper/model-values.ts

@@ -92,7 +92,7 @@ export function getDisplayValueScalar(fieldName: string, model: string, key: str
           ? factory.createBinaryExpression(
               factory.createCallExpression(
                 factory.createPropertyAccessExpression(
-                  factory.createIdentifier(getRecordsName(model)),
+                  factory.createIdentifier(getRecordsName(fieldName)),
                   factory.createIdentifier('find'),
                 ),
                 undefined,
@@ -161,6 +161,8 @@ export function getDisplayValueScalar(fieldName: string, model: string, key: str
             )
           : factory.createCallExpression(
               factory.createPropertyAccessExpression(
+                // DataStore needs a value to the model instead of the field
+                // because the value of field may be different where this variable was defined.
                 factory.createIdentifier(getRecordsName(model)),
                 factory.createIdentifier('find'),
               ),
@@ -210,8 +212,13 @@ export function getDisplayValueScalar(fieldName: string, model: string, key: str
     id: r?.id,
     label: getDisplayValue['fieldName']?.(r),
   }))
+  // For use in AutoComplete options prop only
  */
-function getSuggestionsForRelationshipScalar(modelName: string, key: string, fieldName: string): CallExpression {
+function getSuggestionsForRelationshipScalar(
+  valueRefForBuildingSuggestions: string,
+  key: string,
+  fieldName: string,
+): CallExpression {
   const recordString = 'r';
 
   const labelExpression = getDisplayValueCallChain({ fieldName, recordString });
@@ -220,7 +227,7 @@ function getSuggestionsForRelationshipScalar(modelName: string, key: string, fie
     factory.createPropertyAccessExpression(
       factory.createCallExpression(
         factory.createPropertyAccessExpression(
-          factory.createIdentifier(getRecordsName(modelName)),
+          factory.createIdentifier(getRecordsName(valueRefForBuildingSuggestions)),
           factory.createIdentifier('filter'),
         ),
         undefined,
@@ -340,6 +347,7 @@ function getSuggestionsForRelationshipScalar(modelName: string, key: string, fie
     id: getIDValue['primaryAuthor]?.(r),
     label: getDisplayValue['primaryAuthor']?.(r),
   }))
+  For AutoComplete field only
  */
 function getModelTypeSuggestions({
   modelName,
@@ -354,7 +362,9 @@ function getModelTypeSuggestions({
 }): CallExpression {
   const recordString = 'r';
   const labelExpression = getDisplayValueCallChain({ fieldName, recordString });
-  const optionsRecords = dataApi === 'GraphQL' ? `${fieldName}Records` : getRecordsName(modelName);
+  // Autocomplete is special and needs a ref to the model for DataStore because the
+  // fieldName will not be the same as when the reference was created.
+  const optionsRecords = getRecordsName(dataApi === 'GraphQL' ? fieldName : modelName);
 
   const mappingFunction = factory.createArrowFunction(
     undefined,

packages/codegen-ui-react/lib/forms/form-renderer-helper/relationship.ts

@@ -60,19 +60,18 @@ import { getAmplifyJSVersionToRender } from '../../helpers/amplify-js-versioning
 export const buildRelationshipQuery = (
   relatedModelName: string,
   importCollection: ImportCollection,
+  fieldName: string,
   dataApi?: DataApiKind,
   renderConfigDependencies?: { [key: string]: string },
 ) => {
-  const itemsName = getRecordsName(relatedModelName);
-
   /* istanbul ignore next */
   if (dataApi === 'GraphQL') {
     return factory.createVariableStatement(
       undefined,
       factory.createVariableDeclarationList(
         [
           factory.createVariableDeclaration(
-            factory.createIdentifier(itemsName),
+            factory.createIdentifier(getRecordsName(fieldName)),
             undefined,
             undefined,
             wrapInParenthesizedExpression(
@@ -101,7 +100,7 @@ export const buildRelationshipQuery = (
     ),
   ];
   return buildBaseCollectionVariableStatement(
-    itemsName,
+    getRecordsName(relatedModelName),
     factory.createCallExpression(factory.createIdentifier('useDataStoreBinding'), undefined, [
       factory.createObjectLiteralExpression(objectProperties, true),
     ]),
@@ -891,7 +890,9 @@ export const buildManyToManyRelationshipStatements = (
                           undefined,
                           undefined,
                           getMatchEveryModelFieldCallExpression({
-                            recordsArrayName: getRecordsName(relatedModelName),
+                            // Special and needs a ref to the model for DataStore because the
+                            // fieldName will not be the same as when the reference was created.
+                            recordsArrayName: getRecordsName(dataApi === 'GraphQL' ? fieldName : relatedModelName),
                             JSONName: 'id',
                           }),
                         ),

packages/codegen-ui-react/lib/forms/form-renderer-helper/render-array-field.ts

@@ -264,9 +264,7 @@ export const renderArrayFieldComponent = (
       ],
       undefined,
       factory.createToken(SyntaxKind.EqualsGreaterThanToken),
-      dataApi === 'GraphQL' && !isModelDataType(fieldConfig)
-        ? getDisplayValueScalar(fieldName, fieldName, scalarKey, dataApi)
-        : getDisplayValueScalar(fieldName, scalarModel, scalarKey, dataApi),
+      getDisplayValueScalar(fieldName, scalarModel, scalarKey, dataApi),
     );
   }
 
@@ -451,9 +449,7 @@ export const renderArrayFieldComponent = (
                 [
                   factory.createExpressionStatement(
                     factory.createCallExpression(setFieldValueIdentifier, undefined, [
-                      dataApi === 'GraphQL'
-                        ? getDisplayValueScalar(fieldName, fieldName, scalarKey, dataApi)
-                        : getDisplayValueScalar(fieldName, scalarModel, scalarKey, dataApi),
+                      getDisplayValueScalar(fieldName, scalarModel, scalarKey, dataApi),
                     ]),
                   ),
                   ...setStateStatements,

packages/codegen-ui-react/lib/forms/react-form-renderer.ts

@@ -586,12 +586,12 @@ export abstract class ReactFormTemplateRenderer extends StudioTemplateRenderer<
 
     // Add value state and ref array type fields in ArrayField wrapper
 
-    const relatedModelNames: Set<string> = new Set();
+    const relatedModelNames: Map<string, { relatedModelName: string; fieldName: string }> = new Map();
 
     Object.entries(formMetadata.fieldConfigs).forEach(([field, fieldConfig]) => {
       const { sanitizedFieldName, componentType, dataType, relationship } = fieldConfig;
+      const renderedName = sanitizedFieldName || field;
       if (shouldWrapInArrayField(fieldConfig)) {
-        const renderedName = sanitizedFieldName || field;
         if (fieldConfig.relationship) {
           statements.push(
             buildUseStateExpression(
@@ -631,7 +631,10 @@ export abstract class ReactFormTemplateRenderer extends StudioTemplateRenderer<
       }
 
       if (relationship && !relatedModelNames.has(relationship.relatedModelName)) {
-        relatedModelNames.add(relationship.relatedModelName);
+        relatedModelNames.set(relationship.relatedModelName, {
+          relatedModelName: relationship.relatedModelName,
+          fieldName: renderedName,
+        });
       }
     });
 
@@ -668,8 +671,14 @@ export abstract class ReactFormTemplateRenderer extends StudioTemplateRenderer<
         this.importCollection.addMappedImport(ImportValue.USE_DATA_STORE_BINDING);
 
         statements.push(
-          ...[...relatedModelNames].map((relatedModelName) =>
-            buildRelationshipQuery(relatedModelName, this.importCollection, dataApi, this.renderConfig.dependencies),
+          ...[...relatedModelNames].map(([, { relatedModelName, fieldName }]) =>
+            buildRelationshipQuery(
+              relatedModelName,
+              this.importCollection,
+              fieldName,
+              dataApi,
+              this.renderConfig.dependencies,
+            ),
           ),
         );
       }