👉 Repo link: https://github.com/shadeemerhi/imessage-graphql ❤️ 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 3 of a multi-part series. I'm currently working on the new parts and am planning to release them every 4-7, so be sure to subscribe for those! ❗️ 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: ConversationItem Component: [https://github.com/shadeemerhi/imessage-graphql-tutorial/blob/master/frontend/src/components/Chat/Conversations/ConversationItem.tsx](https://github.com/shadeemerhi/imessage-graphql-tutorial/blob/master/frontend/src/components/Chat/Conversations/ConversationItem.tsx) FeedHeader Component: [https://github.com/shadeemerhi/imessage-graphql-tutorial/blob/master/frontend/src/components/Chat/Feed/Messages/Header.tsx](https://github.com/shadeemerhi/imessage-graphql-tutorial/blob/master/frontend/src/components/Chat/Feed/Messages/Header.tsx) formatUsernames Function: [https://github.com/shadeemerhi/imessage-graphql-tutorial/blob/master/frontend/src/util/functions.ts](https://github.com/shadeemerhi/imessage-graphql-tutorial/blob/master/frontend/src/util/functions.ts) Part 3 Chapters: 0:00 - Intro & Preface 1:05 - Database Modelling & Prisma Schema 21:39 - createConversation Resolver (Prisma Create & Prisma Validator) 36:30 - Storing Conversations & Participants 43:55 - Redirecting Users w/ Next.JS Router 50:21 - Conversations Query 1 (conversations Resolver definition, ConversationFields typeDefs) 59:46 - Conversations Query 2 (conversations useQuery, Prisma TypeScript Types) 1:11:13 - Conversations Query 3 (conversations Resolver completion, fetch conversations) 1:17:17 - ConversationItem Component Creation 1:21:46 - Subscriptions & WebSockets w/ Apollo Client (graphql-ws, wsLink, splitLink) 1:27:35 - Subscriptions & WebSockets w/ Apollo Server (WebSocket Server, Subscription endpoint & Context) 1:42:34 - conversationCreated Subscription Backend (Publish/Subscribe Pattern, PubSub Class) 1:47:43 - conversationCreated Subscription Frontend (subscribeToMore function, updateQuery) 1:57:38 - Testing the conversationCreated Subscription 2:04:09 - conversationCreated Subscription Troubleshooting (fixing typeDefs) 2:07:10 - Filtering Subscription Events (withFilter function) 2:16:16 - ConversationItem & FeedHeader Components 2:36:50 - Outro & Part 4 Preface #react #javascript #softwareengineer
👉 Repo link: https://github.com/shadeemerhi/imessage-graphql ❤️ 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 3 of a multi-part series. I'm currently working on the new parts and am planning to release them every 4-7, so be sure to subscribe for those! ❗️ 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: ConversationItem Component: [https://github.com/shadeemerhi/imessage-graphql-tutorial/blob/master/frontend/src/components/Chat/Conversations/ConversationItem.tsx](https://github.com/shadeemerhi/imessage-graphql-tutorial/blob/master/frontend/src/components/Chat/Conversations/ConversationItem.tsx) FeedHeader Component: [https://github.com/shadeemerhi/imessage-graphql-tutorial/blob/master/frontend/src/components/Chat/Feed/Messages/Header.tsx](https://github.com/shadeemerhi/imessage-graphql-tutorial/blob/master/frontend/src/components/Chat/Feed/Messages/Header.tsx) formatUsernames Function: [https://github.com/shadeemerhi/imessage-graphql-tutorial/blob/master/frontend/src/util/functions.ts](https://github.com/shadeemerhi/imessage-graphql-tutorial/blob/master/frontend/src/util/functions.ts) Part 3 Chapters: 0:00 - Intro & Preface 1:05 - Database Modelling & Prisma Schema 21:39 - createConversation Resolver (Prisma Create & Prisma Validator) 36:30 - Storing Conversations & Participants 43:55 - Redirecting Users w/ Next.JS Router 50:21 - Conversations Query 1 (conversations Resolver definition, ConversationFields typeDefs) 59:46 - Conversations Query 2 (conversations useQuery, Prisma TypeScript Types) 1:11:13 - Conversations Query 3 (conversations Resolver completion, fetch conversations) 1:17:17 - ConversationItem Component Creation 1:21:46 - Subscriptions & WebSockets w/ Apollo Client (graphql-ws, wsLink, splitLink) 1:27:35 - Subscriptions & WebSockets w/ Apollo Server (WebSocket Server, Subscription endpoint & Context) 1:42:34 - conversationCreated Subscription Backend (Publish/Subscribe Pattern, PubSub Class) 1:47:43 - conversationCreated Subscription Frontend (subscribeToMore function, updateQuery) 1:57:38 - Testing the conversationCreated Subscription 2:04:09 - conversationCreated Subscription Troubleshooting (fixing typeDefs) 2:07:10 - Filtering Subscription Events (withFilter function) 2:16:16 - ConversationItem & FeedHeader Components 2:36:50 - Outro & Part 4 Preface #react #javascript #softwareengineer