feat: handle parent relationship without belongsTo for GraphQL

packages/codegen-ui-react/lib/__tests__/studio-ui-codegen-react-forms.test.ts

@@ -1074,6 +1074,18 @@ describe('amplify form renderer tests', () => {
       expect(componentText).toMatchSnapshot();
       expect(declaration).toMatchSnapshot();
     });
+
+    it('should treat relationship as bidirectional without belongsTo', () => {
+      const { componentText, declaration } = generateWithAmplifyFormRenderer(
+        'forms/relationships/update-comment-no-belongsTo',
+        'datastore/relationships/has-many-comment-no-belongsTo',
+        { ...defaultCLIRenderConfig, ...rendererConfigWithGraphQL },
+        { isNonModelSupported: true, isRelationshipSupported: true },
+      );
+
+      expect(componentText).toMatchSnapshot();
+      expect(declaration).toMatchSnapshot();
+    });
   });
 
   describe('NoApi form tests', () => {

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

@@ -744,13 +744,13 @@ export const buildUpdateDatastoreQuery = (
                       NodeFlags.Const,
                     ),
                   ),
+                  // Add logic to pull related relationship models off record
+                  ...relatedModelStatements,
                   factory.createExpressionStatement(
                     factory.createCallExpression(getSetNameIdentifier(`${lowerCaseDataTypeName}Record`), undefined, [
                       factory.createIdentifier('record'),
                     ]),
                   ),
-                  // Add logic to pull related relationship models off record
-                  ...relatedModelStatements,
                 ],
                 true,
               ),

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

@@ -1287,6 +1287,78 @@ export const buildGetRelationshipModels = (
     );
     return [lazyLoadLinkedDataStatement, setLinkedDataStateStatement];
   }
+
+  if (dataApi === 'GraphQL' && fieldConfigMetaData.relationship && !isModelDataType(fieldConfigMetaData)) {
+    const relatedModelName = lowerCaseFirst(fieldConfigMetaData.relationship.relatedModelName);
+    const queryCall = wrapInParenthesizedExpression(
+      getGraphqlCallExpression(ActionType.GET, fieldConfigMetaData.relationship.relatedModelName, importCollection, {
+        inputs: [
+          factory.createPropertyAssignment(
+            factory.createIdentifier('id'),
+            factory.createIdentifier(`${fieldName}Record`),
+          ),
+        ],
+      }),
+      ['data', getGraphqlQueryForModel(ActionType.GET, fieldConfigMetaData.relationship.relatedModelName)],
+    );
+
+    return [
+      factory.createVariableStatement(
+        undefined,
+        factory.createVariableDeclarationList(
+          [
+            factory.createVariableDeclaration(
+              factory.createIdentifier(`${fieldName}Record`),
+              undefined,
+              undefined,
+              factory.createConditionalExpression(
+                factory.createIdentifier('record'),
+                factory.createToken(SyntaxKind.QuestionToken),
+                factory.createPropertyAccessExpression(
+                  factory.createIdentifier('record'),
+                  factory.createIdentifier(fieldName),
+                ),
+                factory.createToken(SyntaxKind.ColonToken),
+                factory.createIdentifier('undefined'),
+              ),
+            ),
+          ],
+          NodeFlags.Const,
+        ),
+      ),
+      factory.createVariableStatement(
+        undefined,
+        factory.createVariableDeclarationList(
+          [
+            factory.createVariableDeclaration(
+              factory.createIdentifier(`${relatedModelName}Record`),
+              undefined,
+              undefined,
+              factory.createConditionalExpression(
+                factory.createIdentifier(`${fieldName}Record`),
+                factory.createToken(SyntaxKind.QuestionToken),
+                queryCall,
+                factory.createToken(SyntaxKind.ColonToken),
+                factory.createIdentifier('undefined'),
+              ),
+            ),
+          ],
+          NodeFlags.Const,
+        ),
+      ),
+      factory.createExpressionStatement(
+        factory.createCallExpression(getSetNameIdentifier(fieldName), undefined, [
+          factory.createIdentifier(`${fieldName}Record`),
+        ]),
+      ),
+      factory.createExpressionStatement(
+        factory.createCallExpression(getSetNameIdentifier(`${fieldName}Records`), undefined, [
+          factory.createArrayLiteralExpression([factory.createIdentifier(`${relatedModelName}Record`)]),
+        ]),
+      ),
+    ];
+  }
+
   return [
     factory.createVariableStatement(
       undefined,

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

@@ -30,6 +30,7 @@ import { extractModelAndKeys, getDisplayValueObjectName, getDisplayValueScalar }
 import { getElementAccessExpression } from './invalid-variable-helpers';
 import { getSetNameIdentifier, capitalizeFirstLetter } from '../../helpers';
 import { getDecoratedLabel } from './label-decorator';
+import { DataApiKind } from '../../react-render-config';
 
 function getOnChangeAttribute({
   setStateName,
@@ -130,6 +131,7 @@ export const renderArrayFieldComponent = (
   inputField: JsxChild,
   labelDecorator?: LabelDecorator,
   isRequired?: boolean,
+  dataApi: DataApiKind = 'DataStore',
 ) => {
   const fieldConfig = fieldConfigs[fieldName];
   const { sanitizedFieldName, dataType, componentType } = fieldConfig;
@@ -239,7 +241,9 @@ export const renderArrayFieldComponent = (
       ],
       undefined,
       factory.createToken(SyntaxKind.EqualsGreaterThanToken),
-      getDisplayValueScalar(fieldName, scalarModel, scalarKey),
+      dataApi === 'GraphQL' && !isModelDataType(fieldConfig)
+        ? getDisplayValueScalar(fieldName, fieldName, scalarKey)
+        : getDisplayValueScalar(fieldName, scalarModel, scalarKey),
     );
   }
 
@@ -348,7 +352,9 @@ export const renderArrayFieldComponent = (
                 [
                   factory.createExpressionStatement(
                     factory.createCallExpression(setFieldValueIdentifier, undefined, [
-                      getDisplayValueScalar(fieldName, scalarModel, scalarKey),
+                      dataApi === 'GraphQL'
+                        ? getDisplayValueScalar(fieldName, fieldName, scalarKey)
+                        : getDisplayValueScalar(fieldName, scalarModel, scalarKey),
                     ]),
                   ),
                   factory.createExpressionStatement(

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

@@ -654,7 +654,6 @@ export abstract class ReactFormTemplateRenderer extends StudioTemplateRenderer<
       if (!(this.renderConfig.apiConfiguration?.dataApi === 'GraphQL')) {
         this.importCollection.addMappedImport(ImportValue.USE_DATA_STORE_BINDING);
 
-        // @rotp: check if this is needed for collection
         statements.push(
           ...[...relatedModelNames].map((relatedModelName) =>
             buildRelationshipQuery(relatedModelName, this.importCollection, dataApi),
@@ -690,7 +689,13 @@ export abstract class ReactFormTemplateRenderer extends StudioTemplateRenderer<
     }
 
     if (hasAutoComplete && dataApi === 'GraphQL') {
-      statements.push(...getFetchRelatedRecordsCallbacks(formMetadata.fieldConfigs, this.importCollection));
+      statements.push(
+        ...getFetchRelatedRecordsCallbacks(
+          formMetadata.fieldConfigs,
+          this.importCollection,
+          this.renderConfig.apiConfiguration?.dataApi,
+        ),
+      );
     }
 
     return statements;

packages/codegen-ui-react/lib/react-component-renderer.ts

@@ -110,7 +110,15 @@ export class ReactComponentRenderer<TPropIn> extends ComponentRendererBase<
         this.importCollection.addImport(ImportSource.UI_REACT, 'Text');
         this.importCollection.addImport(ImportSource.UI_REACT, 'useTheme');
 
-        return renderArrayFieldComponent(this.component.name, label, fieldConfigs, element, labelDecorator, isRequired);
+        return renderArrayFieldComponent(
+          this.component.name,
+          label,
+          fieldConfigs,
+          element,
+          labelDecorator,
+          isRequired,
+          this.importCollection.rendererConfig?.apiConfiguration?.dataApi,
+        );
       }
     }
 

packages/codegen-ui-react/lib/utils/graphql.ts

@@ -29,7 +29,8 @@ import { ImportCollection, ImportValue } from '../imports';
 import { capitalizeFirstLetter, getSetNameIdentifier, lowerCaseFirst } from '../helpers';
 import { isBoundProperty, isConcatenatedProperty } from '../react-component-render-helper';
 import { Primitive } from '../primitive';
-import { DataStoreRenderConfig, GraphqlRenderConfig, NoApiRenderConfig } from '../react-render-config';
+import { DataApiKind, DataStoreRenderConfig, GraphqlRenderConfig, NoApiRenderConfig } from '../react-render-config';
+import { isModelDataType } from '../forms/form-renderer-helper/render-checkers';
 
 export enum ActionType {
   CREATE = 'create',
@@ -216,6 +217,7 @@ export const getFetchRelatedRecords = (relatedModelName: string) =>
 export const getFetchRelatedRecordsCallbacks = (
   fieldConfigs: Record<string, FieldConfigMetadata>,
   importCollection: ImportCollection,
+  dataApi: DataApiKind = 'DataStore',
 ) => {
   return Object.entries(fieldConfigs).reduce<Statement[]>(
     (acc, [name, { sanitizedFieldName, relationship, valueMappings, componentType }]) => {
@@ -470,27 +472,36 @@ export const getFetchRelatedRecordsCallbacks = (
                                             ],
                                             undefined,
                                             factory.createToken(SyntaxKind.EqualsGreaterThanToken),
-                                            factory.createPrefixUnaryExpression(
-                                              SyntaxKind.ExclamationToken,
-                                              factory.createCallExpression(
-                                                factory.createPropertyAccessExpression(
-                                                  factory.createIdentifier(`${fieldName}IdSet`),
-                                                  factory.createIdentifier('has'),
-                                                ),
-                                                undefined,
-                                                [
-                                                  factory.createCallChain(
+                                            dataApi === 'GraphQL' && !isModelDataType(fieldConfigs[fieldName])
+                                              ? factory.createBinaryExpression(
+                                                  factory.createIdentifier(fieldName),
+                                                  factory.createToken(SyntaxKind.ExclamationEqualsEqualsToken),
+                                                  factory.createPropertyAccessExpression(
+                                                    factory.createIdentifier('item'),
+                                                    factory.createIdentifier('id'),
+                                                  ),
+                                                )
+                                              : factory.createPrefixUnaryExpression(
+                                                  SyntaxKind.ExclamationToken,
+                                                  factory.createCallExpression(
                                                     factory.createPropertyAccessExpression(
-                                                      factory.createIdentifier('getIDValue'),
-                                                      factory.createIdentifier(fieldName),
+                                                      factory.createIdentifier(`${fieldName}IdSet`),
+                                                      factory.createIdentifier('has'),
                                                     ),
-                                                    factory.createToken(SyntaxKind.QuestionDotToken),
                                                     undefined,
-                                                    [factory.createIdentifier('item')],
+                                                    [
+                                                      factory.createCallChain(
+                                                        factory.createPropertyAccessExpression(
+                                                          factory.createIdentifier('getIDValue'),
+                                                          factory.createIdentifier(fieldName),
+                                                        ),
+                                                        factory.createToken(SyntaxKind.QuestionDotToken),
+                                                        undefined,
+                                                        [factory.createIdentifier('item')],
+                                                      ),
+                                                    ],
                                                   ),
-                                                ],
-                                              ),
-                                            ),
+                                                ),
                                           ),
                                         ],
                                       ),