Loading...
; } ``` In the above code, we've added a map over each of our messages to return a `Message` component. We haven't made that so let's make it now. Create a new folder called `components` at the root of your project. Within the `components` folder, create a new file called `message.js`. Set the code of `message.js` to be: ``` import React from "react"; import styles from "../styles/Message.module.css"; export default function Message({ message, isMe }) { if (user) { return ({message.owner}
{message.message}
Loading...
; } } ``` And within `index.js` we'll need to import our new component: ``` import Message from "../components/message"; ``` This component takes two props: - **message**: The message item returned from our GraphQL API - **isMe**: A boolean (true/false) to say whether the message owner equals our (the current signed in user)'s id. Basically, a flag to say if this is our message or another person's message. We are simply returning a div that has different styles depending on whether or not we are the creator of the message. Then, we are populating the text fields of the message with the actual *contents *of that message. ### Live Updates with Subscriptions **Now for the really exciting part!** We can use our auto-generated graphQL subscriptions, to listen to live updates to our messages table in our DynamoDB database. Let's go back to `index.js` and add a few small changes. First let's modify our existing `useEffect` we created. We'll add the AWS Amplify subscription code here. Now it should look like this: ``` useEffect(() => { const fetchUser = async () => { try { const amplifyUser = await Auth.currentAuthenticatedUser(); setUser(amplifyUser); } catch (err) { setUser(null); } }; fetchUser(); // Subscribe to creation of message const subscription = API.graphql( graphqlOperation(onCreateMessage) ).subscribe({ next: ({ provider, value }) => { setStateMessages((stateMessages) => [ ...stateMessages, value.data.onCreateMessage, ]); }, error: (error) => console.warn(error), }); }, []); ``` **What happened?** - We created a `subscription` variable that listens for to our `onCreateMessage` events. - Every time a `createMessage` event is detected (when we create a message via our form), the `next:` code is called. - The `next:` code passes the values of the newly created message in `value` variable. - in the `setStateMessages` call, we are adding the new message to our existing messages in state. #### One small little problem remains! Since we are only returning existing messages if the user was signed in during our `getServersideProps`, new users won't see any existing messages. So, right below our above `useEffect`, we'll add a little code block to fetch existing messages when the `user` variable gets changed. A.K.A. when a user changes from a guest, to a user. ``` useEffect(() => { async function getMessages() { try { const messagesReq = await API.graphql({ query: listMessages, authMode: "AMAZON_COGNITO_USER_POOLS", }); setStateMessages([...messagesReq.data.listMessages.items]); } catch (error) { console.error(error); } } getMessages(); }, [user]); ``` # Conclusion That's it! We have a live chat application π₯³. This pattern of pre-rendering content on the server, then listening for updates to the data client-side is something I have been using a lot recently. Not only that, the authentication is handled server-side with minimal effort required. This means the data is only ever available to those who are authorised to access it. It is crazy powerful, and I hope you are as excited as I am about it! If you love serverless tech like me, I would encourage you to follow me to see more. Thanks for reading! # Find me at: [Buy me a coffee β](https://www.buymeacoffee.com/jarrodwatts) YouTube: youtube.com/channel/UCJae_agpt9S3qwWNED0KHcQ Twitter: twitter.com/JarrodWattsDev GitHub: github.com/jarrodwatts LinkedIn: linkedin.com/in/jarrodwatts Website: jarrodwatts.com