fix: change model type to any if no graphql types (#1086)

Co-authored-by: Justin Shih <jushih@amazon.com>
aws-amplify · Aug 22, 2023 · 4cc0755 · 4cc0755
1 parent f62567e
commit 4cc0755
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 2 deletions.
diff --git a/packages/codegen-ui-react/lib/__tests__/__snapshots__/studio-ui-codegen-react.test.ts.snap b/packages/codegen-ui-react/lib/__tests__/__snapshots__/studio-ui-codegen-react.test.ts.snap
@@ -10235,6 +10235,26 @@ export default function CustomButton(
 "
 `;
 
+exports[`amplify render tests renderer configurations with NoApi should render component without graphql types 1`] = `
+"import * as React from \\"react\\";
+import { EscapeHatchProps } from \\"@aws-amplify/ui-react/internal\\";
+import { ButtonProps } from \\"@aws-amplify/ui-react\\";
+export declare type PrimitiveOverrideProps<T> = Partial<T> & React.DOMAttributes<HTMLDivElement>;
+export declare type ComponentWithDataBindingOverridesProps = {
+    ComponentWithDataBinding?: PrimitiveOverrideProps<ButtonProps>;
+} & EscapeHatchProps;
+export declare type ComponentWithDataBindingProps = React.PropsWithChildren<Partial<ButtonProps> & {
+    width?: Number;
+    isDisabled?: Boolean;
+    buttonUser?: any;
+    buttonColor?: String;
+} & {
+    overrides?: ComponentWithDataBindingOverridesProps | undefined | null;
+}>;
+export default function ComponentWithDataBinding(props: ComponentWithDataBindingProps): React.ReactElement;
+"
+`;
+
 exports[`amplify render tests sample code snippet tests should generate a sample code snippet for components 1`] = `
 "/* eslint-disable */
 import * as React from \\"react\\";

diff --git a/packages/codegen-ui-react/lib/__tests__/studio-ui-codegen-react.test.ts b/packages/codegen-ui-react/lib/__tests__/studio-ui-codegen-react.test.ts
@@ -111,6 +111,24 @@ describe('amplify render tests', () => {
       const generatedCode = generateWithAmplifyRenderer('buttonGolden', rendererConfigWithNoApi);
       expect(generatedCode.componentText).toMatchSnapshot();
     });
+
+    it('should render component without graphql types', () => {
+      const generatedCode = generateWithAmplifyRenderer('componentWithDataBinding', {
+        apiConfiguration: {
+          dataApi: 'GraphQL',
+          typesFilePath: '',
+          fragmentsFilePath: '../graphql/fragments',
+          mutationsFilePath: '../graphql/mutations',
+          queriesFilePath: '../graphql/queries',
+          subscriptionsFilePath: '../graphql/subscriptions',
+        },
+        module: ModuleKind.ES2020,
+        target: ScriptTarget.ES2020,
+        script: ScriptKind.JSX,
+        renderTypeDeclarations: true,
+      });
+      expect(generatedCode.declaration).toMatchSnapshot();
+    });
   });
 
   describe('collection', () => {

diff --git a/packages/codegen-ui-react/lib/react-studio-template-renderer.ts b/packages/codegen-ui-react/lib/react-studio-template-renderer.ts
@@ -120,7 +120,7 @@ import {
   buildArrowFunctionStatement,
 } from './helpers';
 import { addUseEffectWrapper } from './utils/generate-react-hooks';
-import { ActionType, getGraphqlCallExpression, getGraphqlQueryForModel } from './utils/graphql';
+import { ActionType, getGraphqlCallExpression, getGraphqlQueryForModel, isGraphqlConfig } from './utils/graphql';
 
 export abstract class ReactStudioTemplateRenderer extends StudioTemplateRenderer<
   string,
@@ -558,7 +558,11 @@ export abstract class ReactStudioTemplateRenderer extends StudioTemplateRenderer
           );
           propSignatures.push(propSignature);
         } else if (isDataPropertyBinding(binding)) {
-          const modelName = this.importCollection.getMappedModelAlias(binding.bindingProperties.model);
+          let modelName = this.importCollection.getMappedModelAlias(binding.bindingProperties.model);
+          const apiConfig = this.renderConfig.apiConfiguration;
+          if (isGraphqlConfig(apiConfig) && !apiConfig.typesFilePath) {
+            modelName = 'any';
+          }
           const propSignature = factory.createPropertySignature(
             undefined,
             propName,