From 7a1f4c69cfe7c5e6c4a4e1f9fab8befc82dce694 Mon Sep 17 00:00:00 2001 From: josefaidt Date: Wed, 30 Oct 2024 16:05:46 -0700 Subject: [PATCH 1/6] fix events api snippet, remove dupe "events" variable --- .../data/connect-event-api/index.mdx | 45 ++++++++++--------- 1 file changed, 25 insertions(+), 20 deletions(-) diff --git a/src/pages/[platform]/build-a-backend/data/connect-event-api/index.mdx b/src/pages/[platform]/build-a-backend/data/connect-event-api/index.mdx index 83249a9d33d..9fe736117b0 100644 --- a/src/pages/[platform]/build-a-backend/data/connect-event-api/index.mdx +++ b/src/pages/[platform]/build-a-backend/data/connect-event-api/index.mdx @@ -40,7 +40,8 @@ Before you begin, you will need: - An Event API created via the AWS Console - Take note of: HTTP endpoint, region, API Key -```ts +```tsx title="src/App.tsx" +import type { EventsChannel } from 'aws-amplify/data'; import { useState, useEffect } from 'react'; import { Amplify } from 'aws-amplify'; import { events } from 'aws-amplify/data'; @@ -56,41 +57,45 @@ Amplify.configure({ }, }); -export default function MyComponent() { - const [events, setEvents] = useState([]); +export default function App() { + const [myEvents, mySetEvents] = useState([]) useEffect(() => { - let channel; + let channel: EventsChannel + console.log("use effect running") const connectAndSubscribe = async () => { - channel = await events.connect('default/channel'); + channel = await events.connect("default/channel") channel.subscribe({ next: (data) => { - console.log('received', data); - setEvents(prev => [data, ...prev]); + console.log("received", data) + mySetEvents((prev) => [data, ...prev]) }, - error: (err) => console.error('error', err), - }); + error: (err) => console.error("error", err), + }) } - connectAndSubscribe(); + connectAndSubscribe() - return () => channel && channel.close(); - }, []); + return () => channel && channel.close() + }, []) async function publishEvent() { - await events.post("default/channel", {some: 'data'}); + console.log("publishing ") + await events.post("default/channel", { some: "data" }) } return ( - -
    - {events.map((event) => ( -
  • {JSON.stringify(event)}
    • - ))} -
- ); + <> + +
    + {myEvents.map((event, index) => ( +
  • {JSON.stringify(event)}
    • + ))} +
+ + ) } ``` From bde94efd4d9488fc1c591e73cf1873d7e92d039b Mon Sep 17 00:00:00 2001 From: josefaidt Date: Wed, 30 Oct 2024 16:07:04 -0700 Subject: [PATCH 2/6] format --- .../data/connect-event-api/index.mdx | 39 ++++++++++--------- 1 file changed, 20 insertions(+), 19 deletions(-) diff --git a/src/pages/[platform]/build-a-backend/data/connect-event-api/index.mdx b/src/pages/[platform]/build-a-backend/data/connect-event-api/index.mdx index 9fe736117b0..c66bee60ad5 100644 --- a/src/pages/[platform]/build-a-backend/data/connect-event-api/index.mdx +++ b/src/pages/[platform]/build-a-backend/data/connect-event-api/index.mdx @@ -49,41 +49,42 @@ import { events } from 'aws-amplify/data'; Amplify.configure({ API: { Events: { - endpoint: 'https://abcdefghijklmnopqrstuvwxyz.appsync-api.us-east-1.amazonaws.com/event', + endpoint: + 'https://abcdefghijklmnopqrstuvwxyz.appsync-api.us-east-1.amazonaws.com/event', region: 'us-east-1', defaultAuthMode: 'apiKey', - apiKey: 'da2-abcdefghijklmnopqrstuvwxyz', - }, - }, + apiKey: 'da2-abcdefghijklmnopqrstuvwxyz' + } + } }); export default function App() { - const [myEvents, mySetEvents] = useState([]) + const [myEvents, mySetEvents] = useState([]); useEffect(() => { - let channel: EventsChannel - console.log("use effect running") + let channel: EventsChannel; + console.log('use effect running'); const connectAndSubscribe = async () => { - channel = await events.connect("default/channel") + channel = await events.connect('default/channel'); channel.subscribe({ next: (data) => { - console.log("received", data) - mySetEvents((prev) => [data, ...prev]) + console.log('received', data); + mySetEvents((prev) => [data, ...prev]); }, - error: (err) => console.error("error", err), - }) - } + error: (err) => console.error('error', err) + }); + }; - connectAndSubscribe() + connectAndSubscribe(); - return () => channel && channel.close() - }, []) + return () => channel && channel.close(); + }, []); async function publishEvent() { - console.log("publishing ") - await events.post("default/channel", { some: "data" }) + console.log('publishing '); + await events.post('default/channel', { some: 'data' }); } return ( @@ -95,7 +96,7 @@ export default function App() { ))} - ) + ); } ``` From 27160d9fbfabc6f147213cb1a2cbd19a86558b15 Mon Sep 17 00:00:00 2001 From: josef Date: Wed, 30 Oct 2024 16:32:47 -0700 Subject: [PATCH 3/6] Update src/pages/[platform]/build-a-backend/data/connect-event-api/index.mdx --- .../[platform]/build-a-backend/data/connect-event-api/index.mdx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/pages/[platform]/build-a-backend/data/connect-event-api/index.mdx b/src/pages/[platform]/build-a-backend/data/connect-event-api/index.mdx index c66bee60ad5..183ae7eea8e 100644 --- a/src/pages/[platform]/build-a-backend/data/connect-event-api/index.mdx +++ b/src/pages/[platform]/build-a-backend/data/connect-event-api/index.mdx @@ -63,7 +63,6 @@ export default function App() { useEffect(() => { let channel: EventsChannel; - console.log('use effect running'); const connectAndSubscribe = async () => { channel = await events.connect('default/channel'); From f33a8c45143e706284bf433d119c5bcee6ccf0f3 Mon Sep 17 00:00:00 2001 From: josef Date: Wed, 30 Oct 2024 16:32:54 -0700 Subject: [PATCH 4/6] Update src/pages/[platform]/build-a-backend/data/connect-event-api/index.mdx --- .../[platform]/build-a-backend/data/connect-event-api/index.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/[platform]/build-a-backend/data/connect-event-api/index.mdx b/src/pages/[platform]/build-a-backend/data/connect-event-api/index.mdx index 183ae7eea8e..63e0a5f7d92 100644 --- a/src/pages/[platform]/build-a-backend/data/connect-event-api/index.mdx +++ b/src/pages/[platform]/build-a-backend/data/connect-event-api/index.mdx @@ -59,7 +59,7 @@ Amplify.configure({ }); export default function App() { - const [myEvents, mySetEvents] = useState([]); + const [myEvents, setMyEvents] = useState([]); useEffect(() => { let channel: EventsChannel; From e9bcd8b43e58e2599fae9d32ccee0c07056b352e Mon Sep 17 00:00:00 2001 From: josef Date: Wed, 30 Oct 2024 16:33:06 -0700 Subject: [PATCH 5/6] Update src/pages/[platform]/build-a-backend/data/connect-event-api/index.mdx --- .../[platform]/build-a-backend/data/connect-event-api/index.mdx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/pages/[platform]/build-a-backend/data/connect-event-api/index.mdx b/src/pages/[platform]/build-a-backend/data/connect-event-api/index.mdx index 63e0a5f7d92..27f32671be1 100644 --- a/src/pages/[platform]/build-a-backend/data/connect-event-api/index.mdx +++ b/src/pages/[platform]/build-a-backend/data/connect-event-api/index.mdx @@ -82,7 +82,6 @@ export default function App() { }, []); async function publishEvent() { - console.log('publishing '); await events.post('default/channel', { some: 'data' }); } From f1a4fe4f3b17d6c59df37361bebf72321e25b35b Mon Sep 17 00:00:00 2001 From: josefaidt Date: Wed, 30 Oct 2024 16:55:27 -0700 Subject: [PATCH 6/6] mySetEvents -> setMyEvents --- .../[platform]/build-a-backend/data/connect-event-api/index.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/[platform]/build-a-backend/data/connect-event-api/index.mdx b/src/pages/[platform]/build-a-backend/data/connect-event-api/index.mdx index 27f32671be1..777d84dc8c5 100644 --- a/src/pages/[platform]/build-a-backend/data/connect-event-api/index.mdx +++ b/src/pages/[platform]/build-a-backend/data/connect-event-api/index.mdx @@ -70,7 +70,7 @@ export default function App() { channel.subscribe({ next: (data) => { console.log('received', data); - mySetEvents((prev) => [data, ...prev]); + setMyEvents((prev) => [data, ...prev]); }, error: (err) => console.error('error', err) });