Skip to content

Commit

Permalink
Update GraphQL API import and refactor GraphQL call expressions (#1012)
Browse files Browse the repository at this point in the history 
* chore: update graphql api import

* chore: refactor graphql call expressions to common function

* chore: use pluralize for graphql list queries
  • Loading branch information
@rtpascual
rtpascual authored and David Lopez committed Jul 19, 2023
1 parent dc86c7e commit 04a0e21
Show file tree
Hide file tree
Showing 11 changed files with 316 additions and 356 deletions.
164 changes: 118 additions & 46 deletions ...s/codegen-ui-react/lib/__tests__/__snapshots__/studio-ui-codegen-react-forms.test.ts.snap
View file

Large diffs are not rendered by default.

34 changes: 21 additions & 13 deletions packages/codegen-ui-react/lib/__tests__/__snapshots__/studio-ui-codegen-react.test.ts.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -155,7 +155,7 @@ exports[`amplify render tests actions GraphQL DataStoreCreateItem 1`] = `
Object {
"componentText": "/* eslint-disable */
import * as React from \\"react\\";
import { API } from \\"@aws-amplify/api\\";
import { API } from \\"aws-amplify\\";
import { createCustomer } from \\"../graphql/mutations\\";
import { Customer } from \\"../API\\";
import {
Expand All @@ -179,10 +179,14 @@ export default function CreateCustomerButton(
): React.ReactElement {
const { overrides, ...rest } = props;
const createCustomerButtonOnClick = async () => {
const input = { firstName: \\"Din\\", lastName: \\"Djarin\\" };
await API.graphql({
query: createCustomer,
variables: { input },
variables: {
input: {
firstName: \\"Din\\",
lastName: \\"Djarin\\",
},
},
});
};
return (
Expand All @@ -207,7 +211,7 @@ exports[`amplify render tests actions GraphQL DataStoreDeleteItem 1`] = `
Object {
"componentText": "/* eslint-disable */
import * as React from \\"react\\";
import { API } from \\"@aws-amplify/api\\";
import { API } from \\"aws-amplify\\";
import { deleteCustomer } from \\"../graphql/mutations\\";
import { Customer } from \\"../API\\";
import {
Expand All @@ -231,10 +235,13 @@ export default function DeleteCustomerButton(
): React.ReactElement {
const { overrides, ...rest } = props;
const deleteCustomerButtonOnClick = async () => {
const input = { id: \\"d9887268-47dd-4899-9568-db5809218751\\" };
await API.graphql({
query: deleteCustomer,
variables: { input },
variables: {
input: {
id: \\"d9887268-47dd-4899-9568-db5809218751\\",
},
},
});
};
return (
Expand All @@ -259,7 +266,7 @@ exports[`amplify render tests actions GraphQL DataStoreUpdateItem 1`] = `
Object {
"componentText": "/* eslint-disable */
import * as React from \\"react\\";
import { API } from \\"@aws-amplify/api\\";
import { API } from \\"aws-amplify\\";
import { updateCustomer } from \\"../graphql/mutations\\";
import { Customer } from \\"../API\\";
import {
Expand All @@ -283,14 +290,15 @@ export default function UpdateCustomerButton(
): React.ReactElement {
const { overrides, ...rest } = props;
const updateCustomerButtonOnClick = async () => {
const input = {
firstName: \\"Din\\",
lastName: \\"Djarin\\",
id: \\"d9887268-47dd-4899-9568-db5809218751\\",
};
await API.graphql({
query: updateCustomer,
variables: { input },
variables: {
input: {
firstName: \\"Din\\",
lastName: \\"Djarin\\",
id: \\"d9887268-47dd-4899-9568-db5809218751\\",
},
},
});
};
return (
Expand Down
12 changes: 6 additions & 6 deletions packages/codegen-ui-react/lib/__tests__/studio-ui-codegen-react-forms.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -729,7 +729,7 @@ describe('amplify form renderer tests', () => {
expect(componentText).toContain('import { Author, Book } from "../API";');

// check binding call is generated
expect(componentText).toContain('const authorRecords = await API.graphql({ query: listAuthors');
expect(componentText).toContain('const authorRecords = await API.graphql({');

expect(componentText).toMatchSnapshot();
});
Expand All @@ -745,8 +745,8 @@ describe('amplify form renderer tests', () => {
expect(componentText).toContain('import { Author, Book, Title } from "../API";');

// check binding calls are generated
expect(componentText).toContain('const authorRecords = await API.graphql({ query: listAuthors');
expect(componentText).toContain('const titleRecords = await API.graphql({ query: listTitles');
expect(componentText).toContain('const authorRecords = await API.graphql({');
expect(componentText).toContain('const titleRecords = await API.graphql({');

expect(componentText).toMatchSnapshot();
});
Expand All @@ -762,7 +762,7 @@ describe('amplify form renderer tests', () => {
expect(componentText).toContain('import { Member, Team } from "../API";');

// check binding call is generated
expect(componentText).toContain('const teamRecords = await API.graphql({ query: listTeams');
expect(componentText).toContain('const teamRecords = await API.graphql({');

expect(componentText).toMatchSnapshot();
});
Expand All @@ -778,7 +778,7 @@ describe('amplify form renderer tests', () => {
expect(componentText).toContain('import { Post, Tag, TagPost } from "../API";');

// check binding call is generated
expect(componentText).toContain('const postRecords = await API.graphql({ query: listPosts');
expect(componentText).toContain('const postRecords = await API.graphql({');

// check custom display value is set
expect(componentText).toContain('Posts: (r) => r?.title');
Expand All @@ -797,7 +797,7 @@ describe('amplify form renderer tests', () => {
expect(componentText).toContain('import { School, Student } from "../API";');

// check binding call is generated
expect(componentText).toContain('const studentRecords = await API.graphql({ query: listStudents');
expect(componentText).toContain('const studentRecords = await API.graphql({');

// check custom display value is set
expect(componentText).toContain('Students: (r) => r?.name');
Expand Down
107 changes: 17 additions & 90 deletions packages/codegen-ui-react/lib/forms/form-renderer-helper/bidirectional-relationship.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ import { ImportCollection } from '../../imports';
import { isModelDataType } from './render-checkers';
import { getRecordName } from './form-state';
import { DataApiKind } from '../../react-render-config';
import { ActionType, getGraphqlCallExpression } from '../../utils/graphql';

function getFieldBiDirectionalWith({
modelName,
Expand Down Expand Up @@ -98,59 +99,19 @@ function unlinkModelRecordExpression({
dataApi?: DataApiKind;
}) {
if (dataApi === 'GraphQL') {
const updateMutation = `update${modelName}`;
const inputs = [
factory.createSpreadAssignment(factory.createIdentifier(recordNameToUnlink)),
factory.createPropertyAssignment(factory.createIdentifier(fieldName), factory.createIdentifier('undefined')),
...associatedFields.map((field) =>
factory.createPropertyAssignment(factory.createIdentifier(field), factory.createIdentifier('undefined')),
),
];

return factory.createExpressionStatement(
factory.createCallExpression(
factory.createPropertyAccessExpression(factory.createIdentifier('promises'), factory.createIdentifier('push')),
undefined,
[
factory.createCallExpression(
factory.createPropertyAccessExpression(
factory.createIdentifier('API'),
factory.createIdentifier('graphql'),
),
undefined,
[
factory.createObjectLiteralExpression(
[
factory.createPropertyAssignment(
factory.createIdentifier('query'),
factory.createIdentifier(importCollection.addGraphqlMutationImport(updateMutation)),
),
factory.createPropertyAssignment(
factory.createIdentifier('variables'),
factory.createObjectLiteralExpression(
[
factory.createPropertyAssignment(
factory.createIdentifier('input'),
factory.createObjectLiteralExpression(
[
factory.createSpreadAssignment(factory.createIdentifier(recordNameToUnlink)),
factory.createPropertyAssignment(
factory.createIdentifier(fieldName),
factory.createIdentifier('undefined'),
),
...associatedFields.map((field) =>
factory.createPropertyAssignment(
factory.createIdentifier(field),
factory.createIdentifier('undefined'),
),
),
],
true,
),
),
],
true,
),
),
],
true,
),
],
),
],
[getGraphqlCallExpression(ActionType.UPDATE, modelName, importCollection, inputs)],
),
);
}
Expand Down Expand Up @@ -305,53 +266,19 @@ function linkModelRecordExpression({
dataApi?: DataApiKind;
}) {
if (dataApi === 'GraphQL') {
const updateMutation = `update${importedRelatedModelName}`;
const inputs = [
factory.createSpreadAssignment(factory.createIdentifier(importedRelatedModelName)),
factory.createPropertyAssignment(
factory.createIdentifier(fieldBiDirectionalWithName),
factory.createIdentifier(currentRecord),
),
];

return factory.createExpressionStatement(
factory.createCallExpression(
factory.createPropertyAccessExpression(factory.createIdentifier('promises'), factory.createIdentifier('push')),
undefined,
[
factory.createCallExpression(
factory.createPropertyAccessExpression(
factory.createIdentifier('API'),
factory.createIdentifier('graphql'),
),
undefined,
[
factory.createObjectLiteralExpression(
[
factory.createPropertyAssignment(
factory.createIdentifier('query'),
factory.createIdentifier(importCollection.addGraphqlMutationImport(updateMutation)),
),
factory.createPropertyAssignment(
factory.createIdentifier('variables'),
factory.createObjectLiteralExpression(
[
factory.createPropertyAssignment(
factory.createIdentifier('input'),
factory.createObjectLiteralExpression(
[
factory.createSpreadAssignment(factory.createIdentifier(importedRelatedModelName)),
factory.createPropertyAssignment(
factory.createIdentifier(fieldBiDirectionalWithName),
factory.createIdentifier(currentRecord),
),
],
true,
),
),
],
true,
),
),
],
true,
),
],
),
],
[getGraphqlCallExpression(ActionType.UPDATE, importedRelatedModelName, importCollection, inputs)],
),
);
}
Expand Down
31 changes: 3 additions & 28 deletions packages/codegen-ui-react/lib/forms/form-renderer-helper/cta-props.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@ import { ImportCollection } from '../../imports';
import { getBiDirectionalRelationshipStatements } from './bidirectional-relationship';
import { generateModelObjectToSave } from './parse-fields';
import { DataApiKind } from '../../react-render-config';
import { ActionType, getGraphqlCallExpression } from '../../utils/graphql';

const getRecordCreateCallExpression = ({
savedObjectName,
Expand All @@ -49,35 +50,9 @@ const getRecordCreateCallExpression = ({
dataApi?: DataApiKind;
}) => {
if (dataApi === 'GraphQL') {
const createMutation = `create${importedModelName}`;
const inputs = [factory.createSpreadAssignment(factory.createIdentifier(savedObjectName))];

return factory.createCallExpression(
factory.createPropertyAccessExpression(factory.createIdentifier('API'), factory.createIdentifier('graphql')),
undefined,
[
factory.createObjectLiteralExpression(
[
factory.createPropertyAssignment(
factory.createIdentifier('query'),
factory.createIdentifier(importCollection.addGraphqlMutationImport(createMutation)),
),
factory.createPropertyAssignment(
factory.createIdentifier('variables'),
factory.createObjectLiteralExpression(
[
factory.createPropertyAssignment(
factory.createIdentifier('input'),
factory.createIdentifier(savedObjectName),
),
],
false,
),
),
],
true,
),
],
);
return getGraphqlCallExpression(ActionType.CREATE, importedModelName, importCollection, inputs);
}

return factory.createCallExpression(
Expand Down
Loading

0 comments on commit 04a0e21

Please sign in to comment.