From e08f3dff1499bc9bd3a03d99b3a421382afe280f Mon Sep 17 00:00:00 2001 From: Chris Bonifacio Date: Fri, 19 Jul 2024 14:26:33 -0400 Subject: [PATCH 01/19] remove reference of renameModelFields --- .../connect-postgres-mysql-database/index.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/[platform]/build-a-backend/data/connect-to-existing-data-sources/connect-postgres-mysql-database/index.mdx b/src/pages/[platform]/build-a-backend/data/connect-to-existing-data-sources/connect-postgres-mysql-database/index.mdx index 5b7f0242fd1..ad127268211 100644 --- a/src/pages/[platform]/build-a-backend/data/connect-to-existing-data-sources/connect-postgres-mysql-database/index.mdx +++ b/src/pages/[platform]/build-a-backend/data/connect-to-existing-data-sources/connect-postgres-mysql-database/index.mdx @@ -201,7 +201,7 @@ When deploying your app to production, you need to [add the database connection ## Rename generated models and fields -To improve the ergonomics of your API, you might want to rename the generate fields or types to better accommodate your use case. Use the `renameModels()` and `renameModelFields()` modifiers to rename the auto-inferred data models and their fields. +To improve the ergonomics of your API, you might want to rename the generate fields or types to better accommodate your use case. Use the `renameModels()` modifier to rename the auto-inferred data models. ```ts // Rename models or fields to be more idiomatic for frontend code From e8acc67ddc4b9fbde86c41db34720bda10da7f9d Mon Sep 17 00:00:00 2001 From: Chris Bonifacio Date: Mon, 16 Dec 2024 11:41:08 -0500 Subject: [PATCH 02/19] add code examples for angular --- .../data/set-up-data/index.mdx | 171 +++++++++++++++++- 1 file changed, 166 insertions(+), 5 deletions(-) diff --git a/src/pages/[platform]/build-a-backend/data/set-up-data/index.mdx b/src/pages/[platform]/build-a-backend/data/set-up-data/index.mdx index 1183a641169..4af3bf8980c 100644 --- a/src/pages/[platform]/build-a-backend/data/set-up-data/index.mdx +++ b/src/pages/[platform]/build-a-backend/data/set-up-data/index.mdx @@ -360,7 +360,7 @@ Future main() async { ## Write data to your backend - + Let's first add a button to create a new todo item. To make a "create Todo" API request, generate the data client using `generateClient()` in your frontend code, and then call `.create()` operation for the Todo model. The Data client is a fully typed client that gives you in-IDE code completion. To enable this in-IDE code completion capability, pass in the `Schema` type to the `generateClient` function. @@ -391,8 +391,44 @@ Run the application in local development mode and check your network tab after c Try playing around with the code completion of `.update(...)` and `.delete(...)` to get a sense of other mutation operations. + + + + +Let's first add a button to create a new todo item. To make a "create Todo" API request, generate the data client using `generateClient()` in your frontend code, and then call `.create()` operation for the Todo model. The Data client is a fully typed client that gives you in-IDE code completion. To enable this in-IDE code completion capability, pass in the `Schema` type to the `generateClient` function. + +```tsx title="todo-list.component.ts" +import { Component } from '@angular/core'; +import type { Schema } from '../amplify/data/resource'; +import { generateClient } from 'aws-amplify/data'; + +const client = generateClient(); + +@Component({ + selector: 'app-todo-list', + template: ` + + ` +}) +export class TodoListComponent { + async createTodo() { + await client.models.Todo.create({ + content: window.prompt("Todo content?"), + isDone: false + }); + } +} +``` + +Run the application in local development mode and check your network tab after creating a todo. You should see a successful request to a `/graphql` endpoint. + + + +Try playing around with the code completion of `.update(...)` and `.delete(...)` to get a sense of other mutation operations. + + In your MainActivity, add a button to create a new todo. @@ -583,9 +619,7 @@ Creating Todo successful. Next, list all your todos and then refetch the todos after a todo has been added: - - - + ```tsx title="src/TodoList.tsx" import { useState, useEffect } from "react"; import type { Schema } from "../amplify/data/resource"; @@ -628,6 +662,49 @@ export default function TodoList() { ``` + + +```tsx title="todo-list.component.ts" +import { Component, OnInit } from '@angular/core'; +import type { Schema } from '../amplify/data/resource'; +import { generateClient } from 'aws-amplify/data'; + +const client = generateClient(); + +@Component({ + selector: 'app-todo-list', + template: ` +
+ +
    +
  • {{ todo.content }}
    • +
+
+ ` +}) +export class TodoListComponent implements OnInit { + todos: Schema['Todo']['type'][] = []; + + async ngOnInit() { + await this.fetchTodos(); + } + + async fetchTodos() { + const { data: items } = await client.models.Todo.list(); + this.todos = items; + } + + async createTodo() { + await client.models.Todo.create({ + content: window.prompt('Todo content?'), + isDone: false + }); + await this.fetchTodos(); + } +} +``` + + Start by creating a new `TodoList` @Composable that fetches the data on the initial display of the TodoList: @@ -838,7 +915,7 @@ class _MyHomePageState extends State { ## Subscribe to real-time updates - + You can also use `observeQuery` to subscribe to a live feed of your backend data. Let's refactor the code to use a real-time observeQuery instead. @@ -893,6 +970,90 @@ You can also use `.onCreate`, `.onUpdate`, or `.onDelete` to subscribe to specif + + + +You can also use `observeQuery` to subscribe to a live feed of your backend data. Let's refactor the code to use a real-time observeQuery instead. + +```tsx title="todo-list.component.ts" +import { Component, OnInit } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { generateClient } from 'aws-amplify/data'; +import type { Schema } from '../../../amplify/data/resource'; +import { Subscription } from 'rxjs'; + +const client = generateClient(); + +@Component({ + selector: 'app-todos', + standalone: true, + imports: [CommonModule], + template: ` +
+

My todos

+ +
    +
  • + {{ todo.content }} +
    • +
+
+ 🥳 App successfully hosted. Try creating a new todo. +
+ + Review next steps of this tutorial. + +
+
+ `, +}) +export class TodosComponent implements OnInit { + todos: Schema['Todo']['type'][] = []; + subscription?: Subscription; + + ngOnInit(): void { + this.listTodos(); + } + + ngOnDestroy(): void { + this.subscription?.unsubscribe(); + } + + listTodos() { + try { + this.subscription = client.models.Todo.observeQuery().subscribe({ + next: ({ items, isSynced }) => { + this.todos = items; + }, + }); + } catch (error) { + console.error('error fetching todos', error); + } + } + + createTodo() { + try { + client.models.Todo.create({ + content: window.prompt('Todo content'), + }); + this.listTodos(); + } catch (error) { + console.error('error creating todos', error); + } + } +} +``` + +Now try to open your app in two browser windows and see how creating a todo in one window automatically adds the todo in the second window as well. + + + +You can also use `.onCreate`, `.onUpdate`, or `.onDelete` to subscribe to specific events. Review [Subscribe to real-time events](/[platform]/build-a-backend/data/subscribe-data) to learn more about subscribing to specific mutation events. + + + + + To add real-time updates, you can use the subscription feature of Amplify Data. It allows to subscribe to `onCreate`, `onUpdate`, and `onDelete` events of the application. In our example, let's append the list every time a new todo is added. From e7259e6f04311eaba41870cc986d1707c7c91055 Mon Sep 17 00:00:00 2001 From: Chris Bonifacio Date: Mon, 16 Dec 2024 12:52:07 -0500 Subject: [PATCH 03/19] add angular specific code examples --- .../data/set-up-data/index.mdx | 37 ++++--------------- 1 file changed, 7 insertions(+), 30 deletions(-) diff --git a/src/pages/[platform]/build-a-backend/data/set-up-data/index.mdx b/src/pages/[platform]/build-a-backend/data/set-up-data/index.mdx index a2fc0facab7..9fa94da0398 100644 --- a/src/pages/[platform]/build-a-backend/data/set-up-data/index.mdx +++ b/src/pages/[platform]/build-a-backend/data/set-up-data/index.mdx @@ -383,8 +383,7 @@ Let's first add a button to create a new todo item. To make a "create Todo" API - - + ```tsx title="src/TodoList.tsx" import type { Schema } from '../amplify/data/resource' @@ -405,7 +404,6 @@ export default function TodoList() { } ``` - @@ -432,12 +430,9 @@ async function createTodo() { ``` - - - Run the application in local development mode and check your network tab after creating a todo. You should see a successful request to a `/graphql` endpoint. @@ -448,10 +443,7 @@ Try playing around with the code completion of `.update(...)` and `.delete(...)` - -Let's first add a button to create a new todo item. To make a "create Todo" API request, generate the data client using `generateClient()` in your frontend code, and then call `.create()` operation for the Todo model. The Data client is a fully typed client that gives you in-IDE code completion. To enable this in-IDE code completion capability, pass in the `Schema` type to the `generateClient` function. - -```tsx title="todo-list.component.ts" +```ts title="todo-list.component.ts" import { Component } from '@angular/core'; import type { Schema } from '../amplify/data/resource'; import { generateClient } from 'aws-amplify/data'; @@ -673,9 +665,7 @@ Creating Todo successful. Next, list all your todos and then refetch the todos after a todo has been added: - - - + ```tsx title="src/TodoList.tsx" import { useState, useEffect } from "react"; import type { Schema } from "../amplify/data/resource"; @@ -720,7 +710,6 @@ export default function TodoList() { - ```html title="src/TodoList.vue" + + +``` + + + +```ts +import { Component, OnInit } from '@angular/core'; +import { generateClient, type SelectionSet } from 'aws-amplify/data'; +import type { Schema } from '../../../amplify/data/resource'; +import { CommonModule } from '@angular/common'; + +const client = generateClient(); + +const selectionSet = ['content', 'blog.author.*', 'comments.*'] as const; + +type PostWithComments = SelectionSet< + Schema['Post']['type'], + typeof selectionSet +>; + +@Component({ + selector: 'app-todos', + standalone: true, + imports: [CommonModule], + templateUrl: './todos.component.html', + styleUrls: ['./todos.component.css'], +}) +export class TodosComponent implements OnInit { + posts: PostWithComments[] = []; + + constructor() {} + + ngOnInit(): void { + this.fetchPosts(); + } + + async fetchPosts(): Promise { + const { data: postsWithComments } = await client.models.Post.list({ + selectionSet, + }); + this.posts = postsWithComments; + } +} +``` + + ## Cancel read requests You can cancel any query API request by calling `.cancel` on the query request promise that's returned by `.list(...)` or `.get(...)`. From 742c2a0fab36eae80c2a6d2f315464a13295322e Mon Sep 17 00:00:00 2001 From: Chris Bonifacio Date: Mon, 16 Dec 2024 13:40:28 -0500 Subject: [PATCH 05/19] update vue example --- .../[platform]/build-a-backend/data/query-data/index.mdx | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/src/pages/[platform]/build-a-backend/data/query-data/index.mdx b/src/pages/[platform]/build-a-backend/data/query-data/index.mdx index 510c1f2f72c..9bbcc97b570 100644 --- a/src/pages/[platform]/build-a-backend/data/query-data/index.mdx +++ b/src/pages/[platform]/build-a-backend/data/query-data/index.mdx @@ -298,10 +298,8 @@ onMounted(() => { }); -