Update to Amplify Getting Started Guide for Angular

[ChrisJWallace]

Page: /start/getting-started/data-model/q/integration/[integration]

Feedback:

I wanted to write with adding potential update to guide. Towards the end when you add Subscription to app.component.ts the example shows

this.subscription = <Subscription>( this.api.OnCreateRestaurantListener.subscribe((event: any) => { const newRestaurant = event.value.data.onCreateRestaurant; this.restaurants = [newRestaurant, ...this.restaurants]; }) );

I was using the latest version of Angular and CLI and noticed it does require the () after OnCreateRestaurantLister as shown below to not get an error to the .subscribe call

this.subscription = <Subscription>( this.api.OnCreateRestaurantListener().subscribe((event: any) => { const newRestaurant = event.value.data.onCreateRestaurant; this.restaurants = [newRestaurant, ...this.restaurants]; }) );

Sorry if not in proper format. I am just getting back into coding after taking a long break and wanted to update the documents to enable other people to enjoy angular and amplify.

Best, Chris

[Bluepuff71]

That removes the error message but still causes this error: "Connection failed: { "errors":[{ "message":"Validation error of type UndefinedVariable: variable not found" }]}". This is due to the $filter argument that was added to the default codegen for subscriptions.

You can stop that error from happening by passing in {} to this.api.OnCreateRestaurantListener() but this causes the subscription to malfunction and never trigger.

Why? I'm reiterating what I said here but:

All subscription parameters must exist as a field in the returning type. Otherwise, the subscription will malfunction and will never trigger.

It's important to note that this seems to be either a graphql issue or an AWS AppSync issue. Subscriptions created in AWS Appsync still run into this issue.

That being said, I don't know why it doesn't work with input types that resolve to the same base type.

For example, name ultimately resolves to a string:

{name: ModelSubscriptionStringInput} -> { name: { eq: String }}

My solution was to remove the $filter argument from the schema in AppSync (you can get there by running amplify console api then choosing GraphQL), then use amplify pull to bring those changes down locally, then use amplify codegen to update the generated code in my app (note that any changes you made to the generated code will be overridden).

Obviously this isn't a solution if you want to have filtered subscriptions with complex input types... sorry about that.

Oh also, side note: The Subscription class can be from rxjs. I spent so long trying to figure out how to use the zen-observable-ts one... only to find out they both work.

Overall it seems like that angular guide could use some work. (It's had a history of being like this)

After fixing this, I ran into another issue with auth and gave up on angular and moved to vue (the guide still has major problems).

The guide at this point is not from the point of view of setting up one instance but is instead a massive, duct-taped monstrosity of PRs that has never been properly tested.

But hey, it builds spirit!

[nearestnabors]

Thanks so much for this super useful feedback! We updated the Angular getting started guide accordingly!