Skip to content

Commit

Permalink
fix: fetch all related records initially
Browse files Browse the repository at this point in the history
  • Loading branch information
@awinberg-aws
Justin Shih authored and awinberg-aws committed Aug 4, 2023
1 parent 4d95d36 commit 37ce0b5
Show file tree
Hide file tree
Showing 2 changed files with 108 additions and 3 deletions.
73 changes: 73 additions & 0 deletions ...s/codegen-ui-react/lib/__tests__/__snapshots__/studio-ui-codegen-react-forms.test.ts.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -272,6 +272,9 @@ export default function CreateOwnerForm(props) {
setDogRecords(newOptions.slice(0, autocompleteLength));
setDogLoading(false);
};
React.useEffect(() => {
fetchDogRecords(\\"\\");
}, []);
return (
<Grid
as=\\"form\\"
Expand Down Expand Up @@ -1510,6 +1513,10 @@ export default function MyMemberForm(props) {
setTeamRecords(newOptions.slice(0, autocompleteLength));
setTeamLoading(false);
};
React.useEffect(() => {
fetchTeamIDRecords(\\"\\");
fetchTeamRecords(\\"\\");
}, []);
return (
<Grid
as=\\"form\\"
Expand Down Expand Up @@ -2116,6 +2123,9 @@ export default function SchoolCreateForm(props) {
setStudentsRecords(newOptions.slice(0, autocompleteLength));
setStudentsLoading(false);
};
React.useEffect(() => {
fetchStudentsRecords(\\"\\");
}, []);
return (
<Grid
as=\\"form\\"
Expand Down Expand Up @@ -2666,6 +2676,9 @@ export default function BookCreateForm(props) {
setPrimaryAuthorRecords(newOptions.slice(0, autocompleteLength));
setPrimaryAuthorLoading(false);
};
React.useEffect(() => {
fetchPrimaryAuthorRecords(\\"\\");
}, []);
return (
<Grid
as=\\"form\\"
Expand Down Expand Up @@ -3210,6 +3223,9 @@ export default function TagCreateForm(props) {
setPostsRecords(newOptions.slice(0, autocompleteLength));
setPostsLoading(false);
};
React.useEffect(() => {
fetchPostsRecords(\\"\\");
}, []);
return (
<Grid
as=\\"form\\"
Expand Down Expand Up @@ -3871,6 +3887,10 @@ export default function BookCreateForm(props) {
setPrimaryTitleRecords(newOptions.slice(0, autocompleteLength));
setPrimaryTitleLoading(false);
};
React.useEffect(() => {
fetchPrimaryAuthorRecords(\\"\\");
fetchPrimaryTitleRecords(\\"\\");
}, []);
return (
<Grid
as=\\"form\\"
Expand Down Expand Up @@ -4536,6 +4556,9 @@ export default function PostUpdateForm(props) {
setCommentsRecords(newOptions.slice(0, autocompleteLength));
setCommentsLoading(false);
};
React.useEffect(() => {
fetchCommentsRecords(\\"\\");
}, []);
return (
<Grid
as=\\"form\\"
Expand Down Expand Up @@ -6019,6 +6042,9 @@ export default function MovieUpdateForm(props) {
setTagsRecords(newOptions.slice(0, autocompleteLength));
setTagsLoading(false);
};
React.useEffect(() => {
fetchTagsRecords(\\"\\");
}, []);
return (
<Grid
as=\\"form\\"
Expand Down Expand Up @@ -6813,6 +6839,10 @@ export default function CommentUpdateForm(props) {
setPostRecords(newOptions.slice(0, autocompleteLength));
setPostLoading(false);
};
React.useEffect(() => {
fetchPostIDRecords(\\"\\");
fetchPostRecords(\\"\\");
}, []);
return (
<Grid
as=\\"form\\"
Expand Down Expand Up @@ -7529,6 +7559,10 @@ export default function CommentUpdateForm(props) {
setPostRecords(newOptions.slice(0, autocompleteLength));
setPostLoading(false);
};
React.useEffect(() => {
fetchPostIDRecords(\\"\\");
fetchPostRecords(\\"\\");
}, []);
return (
<Grid
as=\\"form\\"
Expand Down Expand Up @@ -8203,6 +8237,9 @@ export default function ClassUpdateForm(props) {
setStudentsRecords(newOptions.slice(0, autocompleteLength));
setStudentsLoading(false);
};
React.useEffect(() => {
fetchStudentsRecords(\\"\\");
}, []);
return (
<Grid
as=\\"form\\"
Expand Down Expand Up @@ -8941,6 +8978,11 @@ export default function UpdateCPKTeacherForm(props) {
setCPKProjectsRecords(newOptions.slice(0, autocompleteLength));
setCPKProjectsLoading(false);
};
React.useEffect(() => {
fetchCPKStudentRecords(\\"\\");
fetchCPKClassesRecords(\\"\\");
fetchCPKProjectsRecords(\\"\\");
}, []);
return (
<Grid
as=\\"form\\"
Expand Down Expand Up @@ -9846,6 +9888,10 @@ export default function CreateCompositeToyForm(props) {
);
setCompositeDogCompositeToysDescriptionLoading(false);
};
React.useEffect(() => {
fetchCompositeDogCompositeToysNameRecords(\\"\\");
fetchCompositeDogCompositeToysDescriptionRecords(\\"\\");
}, []);
return (
<Grid
as=\\"form\\"
Expand Down Expand Up @@ -10653,6 +10699,12 @@ export default function CreateCommentForm(props) {
setPostCommentsIdRecords(newOptions.slice(0, autocompleteLength));
setPostCommentsIdLoading(false);
};
React.useEffect(() => {
fetchPostRecords(\\"\\");
fetchUserRecords(\\"\\");
fetchOrgRecords(\\"\\");
fetchPostCommentsIdRecords(\\"\\");
}, []);
return (
<Grid
as=\\"form\\"
Expand Down Expand Up @@ -11609,6 +11661,12 @@ export default function CreateCompositeDogForm(props) {
setCompositeVetsRecords(newOptions.slice(0, autocompleteLength));
setCompositeVetsLoading(false);
};
React.useEffect(() => {
fetchCompositeBowlRecords(\\"\\");
fetchCompositeOwnerRecords(\\"\\");
fetchCompositeToysRecords(\\"\\");
fetchCompositeVetsRecords(\\"\\");
}, []);
return (
<Grid
as=\\"form\\"
Expand Down Expand Up @@ -12508,6 +12566,9 @@ export default function CreatePostForm(props) {
setCommentsRecords(newOptions.slice(0, autocompleteLength));
setCommentsLoading(false);
};
React.useEffect(() => {
fetchCommentsRecords(\\"\\");
}, []);
return (
<Grid
as=\\"form\\"
Expand Down Expand Up @@ -13067,6 +13128,9 @@ export default function UpdatePostForm(props) {
setCommentsRecords(newOptions.slice(0, autocompleteLength));
setCommentsLoading(false);
};
React.useEffect(() => {
fetchCommentsRecords(\\"\\");
}, []);
return (
<Grid
as=\\"form\\"
Expand Down Expand Up @@ -13638,6 +13702,9 @@ export default function CreateDogForm(props) {
setOwnerRecords(newOptions.slice(0, autocompleteLength));
setOwnerLoading(false);
};
React.useEffect(() => {
fetchOwnerRecords(\\"\\");
}, []);
return (
<Grid
as=\\"form\\"
Expand Down Expand Up @@ -14175,6 +14242,9 @@ export default function CreateOwnerForm(props) {
setDogRecords(newOptions.slice(0, autocompleteLength));
setDogLoading(false);
};
React.useEffect(() => {
fetchDogRecords(\\"\\");
}, []);
return (
<Grid
as=\\"form\\"
Expand Down Expand Up @@ -14738,6 +14808,9 @@ export default function CommentUpdateForm(props) {
setPostIDRecords(newOptions.slice(0, autocompleteLength));
setPostIDLoading(false);
};
React.useEffect(() => {
fetchPostIDRecords(\\"\\");
}, []);
return (
<Grid
as=\\"form\\"
Expand Down
38 changes: 35 additions & 3 deletions packages/codegen-ui-react/lib/utils/graphql.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -209,6 +209,35 @@ export const getGraphQLJoinTableCreateExpression = (
});
};

const fetchRelatedRecordEffect = (fetchRecordFunctions: string[]) => {
return factory.createExpressionStatement(
factory.createCallExpression(
factory.createPropertyAccessExpression(factory.createIdentifier('React'), factory.createIdentifier('useEffect')),
undefined,
[
factory.createArrowFunction(
undefined,
undefined,
[],
undefined,
factory.createToken(SyntaxKind.EqualsGreaterThanToken),
factory.createBlock(
fetchRecordFunctions.map((fetchFunction) => {
return factory.createExpressionStatement(
factory.createCallExpression(factory.createIdentifier(fetchFunction), undefined, [
factory.createStringLiteral(''),
]),
);
}),
true,
),
),
factory.createArrayLiteralExpression([], false),
],
),
);
};

/* istanbul ignore next */
export const getFetchRelatedRecords = (relatedModelName: string) =>
`fetch${capitalizeFirstLetter(relatedModelName)}Records`;
Expand All @@ -219,12 +248,14 @@ export const getFetchRelatedRecordsCallbacks = (
importCollection: ImportCollection,
dataApi: DataApiKind = 'DataStore',
) => {
return Object.entries(fieldConfigs).reduce<Statement[]>(
const initalFetchRecords: string[] = [];
const fetchRecordsStatements = Object.entries(fieldConfigs).reduce<Statement[]>(
(acc, [name, { sanitizedFieldName, relationship, valueMappings, componentType }]) => {
if (relationship && componentType === Primitive.Autocomplete) {
const fieldName = name.split('.')[0];
const renderedFieldName = sanitizedFieldName || fieldName;

const fetchRecordsVariable = getFetchRelatedRecords(renderedFieldName);
initalFetchRecords.push(fetchRecordsVariable);
const setModelLoading = getSetNameIdentifier(`${renderedFieldName}Loading`);
const setModelFetchOption = getSetNameIdentifier(`${renderedFieldName}Records`);

Expand Down Expand Up @@ -257,7 +288,7 @@ export const getFetchRelatedRecordsCallbacks = (
factory.createVariableDeclarationList(
[
factory.createVariableDeclaration(
factory.createIdentifier(getFetchRelatedRecords(renderedFieldName)),
factory.createIdentifier(fetchRecordsVariable),
undefined,
undefined,
factory.createArrowFunction(
Expand Down Expand Up @@ -565,6 +596,7 @@ export const getFetchRelatedRecordsCallbacks = (
},
[],
);
return [...fetchRecordsStatements, fetchRelatedRecordEffect(initalFetchRecords)];
};

export function wrapInParenthesizedExpression(callExpression: CallExpression, accessors: string[]): AwaitExpression {
Expand Down

0 comments on commit 37ce0b5

Please sign in to comment.