From 1031da2ea107a33670b33ed82b92594be2376e04 Mon Sep 17 00:00:00 2001 From: James Jarvis Date: Thu, 17 Apr 2025 12:06:57 -0700 Subject: [PATCH 1/2] chore: update react example code --- .../data/connect-event-api/index.mdx | 60 +++++++++++-------- 1 file changed, 34 insertions(+), 26 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 889e58ec81d..a461511ac45 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 @@ -41,61 +41,69 @@ Before you begin, you will need: - Take note of: HTTP endpoint, region, API Key ```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'; +import type { EventsChannel } from "aws-amplify/data"; +import { useState, useEffect, useRef } from "react"; +import { Amplify } from "aws-amplify"; +import { events } from "aws-amplify/data"; Amplify.configure({ API: { Events: { endpoint: - 'https://abcdefghijklmnopqrstuvwxyz.appsync-api.us-east-1.amazonaws.com/event', - region: 'us-east-1', - defaultAuthMode: 'apiKey', - apiKey: 'da2-abcdefghijklmnopqrstuvwxyz' - } - } + "https://abcdefghijklmnopqrstuvwxyz.appsync-api.us-east-1.amazonaws.com/event", + region: "us-east-1", + defaultAuthMode: "apiKey", + apiKey: "da2-abcdefghijklmnopqrstuvwxyz", + }, + }, }); export default function App() { - const [myEvents, setMyEvents] = useState([]); + const [myEvents, setMyEvents] = useState([]); + + const sub = useRef>(null); useEffect(() => { let channel: EventsChannel; const connectAndSubscribe = async () => { - channel = await events.connect('default/channel'); - - channel.subscribe({ - next: (data) => { - console.log('received', data); - setMyEvents((prev) => [data, ...prev]); - }, - error: (err) => console.error('error', err) - }); + channel = await events.connect("default/channel"); + + if (!sub.current) { + sub.current = channel.subscribe({ + next: (data) => { + console.log("received", data); + setMyEvents((prev) => [data, ...prev]); + }, + error: (err) => console.error("error", err), + }); + } }; connectAndSubscribe(); - return () => channel && channel.close(); + return () => { + sub.current?.unsubscribe(); + sub.current = null; + return channel?.close(); + }; }, []); async function publishEvent() { // Publish via HTTP POST - await events.post('default/channel', { some: 'data' }); + await events.post("default/channel", { some: "data" }); // Alternatively, publish events through the WebSocket channel - const channel = await events.connect('default/channel'); - await channel.publish({ some: 'data' }); + const channel = await events.connect("default/channel"); + await channel.publish({ some: "data" }); } return ( <>
    - {myEvents.map((data) => ( -
  • {JSON.stringify(data.event)}
    • + {myEvents.map((data, idx) => ( +
  • {JSON.stringify(data.event, null, 2)}
    • ))}
From e26e37d5cb7537d76aacd0151f470431c4cfdeb4 Mon Sep 17 00:00:00 2001 From: James Jarvis Date: Fri, 18 Apr 2025 11:25:11 -0700 Subject: [PATCH 2/2] chore: double to single quotes --- .../data/connect-event-api/index.mdx | 30 +++++++++---------- 1 file changed, 15 insertions(+), 15 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 a461511ac45..e3e55757a7a 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 @@ -41,19 +41,19 @@ Before you begin, you will need: - Take note of: HTTP endpoint, region, API Key ```tsx title="src/App.tsx" -import type { EventsChannel } from "aws-amplify/data"; -import { useState, useEffect, useRef } from "react"; -import { Amplify } from "aws-amplify"; -import { events } from "aws-amplify/data"; +import type { EventsChannel } from 'aws-amplify/data'; +import { useState, useEffect, useRef } from 'react'; +import { Amplify } from 'aws-amplify'; +import { events } from 'aws-amplify/data'; Amplify.configure({ API: { Events: { endpoint: - "https://abcdefghijklmnopqrstuvwxyz.appsync-api.us-east-1.amazonaws.com/event", - region: "us-east-1", - defaultAuthMode: "apiKey", - apiKey: "da2-abcdefghijklmnopqrstuvwxyz", + 'https://abcdefghijklmnopqrstuvwxyz.appsync-api.us-east-1.amazonaws.com/event', + region: 'us-east-1', + defaultAuthMode: 'apiKey', + apiKey: 'da2-abcdefghijklmnopqrstuvwxyz', }, }, }); @@ -61,21 +61,21 @@ Amplify.configure({ export default function App() { const [myEvents, setMyEvents] = useState([]); - const sub = useRef>(null); + const sub = useRef>(null); useEffect(() => { let channel: EventsChannel; const connectAndSubscribe = async () => { - channel = await events.connect("default/channel"); + channel = await events.connect('default/channel'); if (!sub.current) { sub.current = channel.subscribe({ next: (data) => { - console.log("received", data); + console.log('received', data); setMyEvents((prev) => [data, ...prev]); }, - error: (err) => console.error("error", err), + error: (err) => console.error('error', err), }); } }; @@ -91,11 +91,11 @@ export default function App() { async function publishEvent() { // Publish via HTTP POST - await events.post("default/channel", { some: "data" }); + await events.post('default/channel', { some: 'data' }); // Alternatively, publish events through the WebSocket channel - const channel = await events.connect("default/channel"); - await channel.publish({ some: "data" }); + const channel = await events.connect('default/channel'); + await channel.publish({ some: 'data' }); } return (