update: typeDef, Response Data, and getting allroom data using apollo client

Author: Manav Gupta

backend/src/index.ts

@@ -47,11 +47,22 @@ const pubsub = new PubSub();
             name,
             description,
           },
+          select: {
+            id: true,
+            name: true,
+            description: true,
+            messages: {
+              select: {
+                id: true,
+                body: true,
+              },
+            },
+          },
         });
       },
       createMessage: async (_: any, args: any) => {
         const { body, roomId, senderId } = args;
-        const mesRes = await prisma.message.create({
+        const messageResponse = await prisma.message.create({
           data: {
             body,
             senderId,
@@ -73,8 +84,10 @@ const pubsub = new PubSub();
             },
           },
         });
-        pubsub.publish(`messageSent ${roomId}`, { messageSent: mesRes });
-        return mesRes;
+        pubsub.publish(`messageSent ${roomId}`, {
+          messageSent: messageResponse,
+        });
+        return messageResponse;
       },
     },
     Subscription: {

backend/src/typeDefs.ts

@@ -10,8 +10,8 @@ export const typeDefs = gql`
   type Message {
     id: String
     body: String
-    senderId: String
-    roomId: String
+    sender: User
+    room: Room
   }
 
   type Room {

frontend/src/components/Chat.tsx

@@ -9,15 +9,17 @@ const client = new ApolloClient({
 });
 
 export const Chat = () => {
-  const [chat, setChat] = useState<String>();
+  const [chat, setChat] = useState<string>();
+
+  console.log(chat);
 
   const onSelectRoom = (roomId: string) => {
     setChat(roomId);
   };
   return (
     <ApolloProvider client={client}>
       <div className="flex">
-        <ChatBox roomId="a448cf91-4009-4442-81a1-2ad8d65fb451" />
+        <ChatBox roomId={chat} />
         <Chatsidebar onSelectRoomChat={onSelectRoom} />
       </div>
     </ApolloProvider>

frontend/src/components/ChatBox.tsx

@@ -5,7 +5,7 @@ import { Avatar, AvatarFallback, AvatarImage } from "./ui/avatar";
 
 import { Separator } from "./ui/separator";
 
-export const ChatBox = ({ roomId }: { roomId: string }) => {
+export const ChatBox = ({ roomId }: { roomId: string | undefined }) => {
   useEffect(() => {
     console.log("roomId", roomId);
   }, [roomId]);

frontend/src/components/ChatSideBar.tsx

@@ -53,7 +53,13 @@ export const Chatsidebar = ({
     <p>Error :</p>
   ) : (
     roomsData?.getAllRooms.map((room: Room) => {
-      return <UserCard key={room.id} roomData={room} />;
+      return (
+        <UserCard
+          onSelectRoom={onSelectRoomChat}
+          key={room.id}
+          roomData={room}
+        />
+      );
     })
   );
 

frontend/src/components/User.tsx

@@ -1,12 +1,18 @@
 import { Room } from "../lib/types";
 import { Avatar, AvatarFallback, AvatarImage } from "./ui/avatar";
 
-export const UserCard = ({ roomData }: { roomData: Room }) => {
+export const UserCard = ({
+  roomData,
+  onSelectRoom,
+}: {
+  roomData: Room;
+  onSelectRoom: (roomId: string) => void;
+}) => {
   console.log(roomData);
   return (
     <li
       onClick={() => {
-        console.log(roomData.id);
+        onSelectRoom(roomData.id);
       }}
       className="flex items-center gap-4 hover:bg-[#0000000f] py-1 px-2 cursor-pointer rounded-md"
     >