๐ Repo link (demo): https://github.com/shadeemerhi/imessage-graphql ๐ Repo link (video build): https://github.com/shadeemerhi/imessage-graphql-tutorial ❤️ Tips & Donations Link: https://paypal.me/shadeemerhi?country.x=CA&locale.x=en_US ( Thank you very much for your support!) ❗️This video is Part 4 of a multi-part series! Please check out Part 1 here if you're new to the series: https://youtu.be/mj_Qe2jBYS4 ❗️ Please comment with any feedback, questions, or concerns! ๐พ JOIN MY DISCORD FOR DIRECT ACCESS TO ME! I WANT TO HELP YOU! ๐ https://discord.gg/Vs6HGMRPFs Build Technologies: ✅ NEXTJS ✅ APOLLO GRAPHQL ✅ CHAKRA UI ✅ NODEJS ✅ MONGO DB ✅ PRISMA Mentioned Links: Upgrade Packages Stack Overflow Post: https://stackoverflow.com/questions/16073603/how-to-update-each-dependency-in-package-json-to-the-latest-version Apollo Client Devtools Chrome Extension: https://chrome.google.com/webstore/detail/apollo-client-devtools/jdkknkkbebbapilgoeccciglkfbmbnfm Part 4 Chapters: 0:00 - Intro 5:00 - Apollo v4 Migration 13:52 - Frontend Package Upgrade (Next.js 13 Migration) 20:00 - Sending Messages 1 (sendMessage mutation) 53:11 - Sending Messages 2 (messageSent subscription & Conversation Messages query backend) 1:13:31 - Sending Messages 3 (Conversation Messages query frontend) 1:39:09 - Sending Messages 4 (onSendMessage function invocation) 2:21:02 - Sending Messages 5 (subscribeToMoreMessages subscription invocation) 2:37:36 - Message Feed (MessageItem component) 2:58:10 - New Message Optimistic UI Rendering (Apollo Cache reads/writes) 3:30:08 - Mark Conversations as Read 4:12:18 - Real-time Conversation Updates (conversationUpdated subscription) 4:47:13 - Deleting Conversations 5:47:56 - Outro #react #javascript #softwareengineer
๐ Repo link (demo): https://github.com/shadeemerhi/imessage-graphql ๐ Repo link (video build): https://github.com/shadeemerhi/imessage-graphql-tutorial ❤️ Tips & Donations Link: https://paypal.me/shadeemerhi?country.x=CA&locale.x=en_US ( Thank you very much for your support!) ❗️This video is Part 4 of a multi-part series! Please check out Part 1 here if you're new to the series: https://youtu.be/mj_Qe2jBYS4 ❗️ Please comment with any feedback, questions, or concerns! ๐พ JOIN MY DISCORD FOR DIRECT ACCESS TO ME! I WANT TO HELP YOU! ๐ https://discord.gg/Vs6HGMRPFs Build Technologies: ✅ NEXTJS ✅ APOLLO GRAPHQL ✅ CHAKRA UI ✅ NODEJS ✅ MONGO DB ✅ PRISMA Mentioned Links: Upgrade Packages Stack Overflow Post: https://stackoverflow.com/questions/16073603/how-to-update-each-dependency-in-package-json-to-the-latest-version Apollo Client Devtools Chrome Extension: https://chrome.google.com/webstore/detail/apollo-client-devtools/jdkknkkbebbapilgoeccciglkfbmbnfm Part 4 Chapters: 0:00 - Intro 5:00 - Apollo v4 Migration 13:52 - Frontend Package Upgrade (Next.js 13 Migration) 20:00 - Sending Messages 1 (sendMessage mutation) 53:11 - Sending Messages 2 (messageSent subscription & Conversation Messages query backend) 1:13:31 - Sending Messages 3 (Conversation Messages query frontend) 1:39:09 - Sending Messages 4 (onSendMessage function invocation) 2:21:02 - Sending Messages 5 (subscribeToMoreMessages subscription invocation) 2:37:36 - Message Feed (MessageItem component) 2:58:10 - New Message Optimistic UI Rendering (Apollo Cache reads/writes) 3:30:08 - Mark Conversations as Read 4:12:18 - Real-time Conversation Updates (conversationUpdated subscription) 4:47:13 - Deleting Conversations 5:47:56 - Outro #react #javascript #softwareengineer