Repo link: https://github.com/shadeemerhi/imessa...
❤ Tips & Donations Link: https://paypal.me/shadeemerhi?country...
( Thank you very much for your support!)
❗This video is Part 3 of a multipart series. I'm currently working on the new parts and am planning to release them every 47, 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! / discord
Build Technologies:
✅ NEXTJS
✅ APOLLO GRAPHQL
✅ CHAKRA UI
✅ NODEJS
✅ MONGO DB
✅ PRISMA
Mentioned Links:
ConversationItem Component: [https://github.com/shadeemerhi/imessa...](https://github.com/shadeemerhi/imessa...)
FeedHeader Component: [https://github.com/shadeemerhi/imessa...](https://github.com/shadeemerhi/imessa...)
formatUsernames Function: [https://github.com/shadeemerhi/imessa...](https://github.com/shadeemerhi/imessa...)
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 (graphqlws, 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