"Connect API and database to the app" part

[paulpacaud]

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

Feedback:

When we follow the tutorial in this part, at the end we just get the following errors:

Error: src/app/restaurants/restaurants.component.ts:35:61 - error TS2339: Property 'subscribe' does not exist on type '(filter?: ModelSubscriptionRestaurantFilterInput | undefined) => Observable<SubscriptionResponse<Pick<__SubscriptionContainer, "onCreateRestaurant">>>'.

35 this.subscription = this.api.OnCreateRestaurantListener.subscribe(

                      ~~~~~~~~~~~~~~~

It comes from the fact that you really badly describe what we have to do in app.component.ts.. !!!!

[abdallahshaban557]

Hello @paulpacaud - can you please paste the end result of your app.component.ts file here?

Also - which version of the Amplify library are you using? you can check that from your package.json file

[sundersc]

@paulpacaud - Thanks for raising the issue. Did you install the zen-observable-ts package manually? If so, that could be a problem. Amplify still uses an older version of zen-observable-ts package.

To solve in this case, you can remove the zen-observable-ts dependency from the client app's package.json file, delete the package-lock.json file and do a fresh npm install. aws-amplify dependency should download the compatible version of zen-observable-ts package which you can use in your client app.

[Tenock]

I am also having this issue. I'm currently using zen-observable-ts 0.8.21

Which version is compatible with Amplify? I've done a fresh npm install with no success.

[BrantDesu]

To solve in this case, you can remove the zen-observable-ts dependency from the client app's package.json file, delete the package-lock.json file and do a fresh npm install. aws-amplify dependency should download the compatible version of zen-observable-ts package which you can use in your client app.

Same problem here, did what you suggested with no success...
Here is a workaround using the graphql/subscriptions.graphql file as shown in the docs

const subscription = API.graphql(
      graphqlOperation(subscriptions.onCreateRestaurant)
      // @ts-ignore:
    ).subscribe({// @ts-ignore:
      next: ({ provider, value }) => console.log({ provider, value }),
      // @ts-ignore:
      error: (error) => console.warn(error)
    });

Then, everytime you create a new restaurant, the data will be stored inside the value variable:

Hope it has been helpful :)

[simon3073]

Any resolution on this? Im also having the "subscribe does not exist on type issue"

Using the aws-amplify dependency of zen-observable-ts (8.0.19)

[Tenock]

Found a solution to this, thanks to this post on StackOverflow.
The Filter parameter, implemented automatically on queries for model directive definitions, is missing on the suggested documentation. Have to be set to undefined to match the subscription type to the response coming from graphQL.

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

[Auston-Zhang]

feel the same, unsure about if this code snippet should be in

app.component.ts
or
restaurants.component.ts

sorry I'm very new to Angular but it would be super helpful.

and could AWS also provide a more complete code repo for us to refer to?