Step 8.2: Rewrite lastMessage to chats query

src/components/ChatRoomScreen/index.tsx

@@ -7,6 +7,7 @@ import ChatNavbar from './ChatNavbar';
 import MessageInput from './MessageInput';
 import MessagesList from './MessagesList';
 import { History } from 'history';
+import * as queries from '../../graphql/queries';
 
 const Container = styled.div`
   background: url(/assets/chat-background.jpg);
@@ -60,6 +61,10 @@ export interface ChatQueryResult {
 
 type OptionalChatQueryResult = ChatQueryResult | null;
 
+interface ChatsResult {
+  chats: any[];
+}
+
 const ChatRoomScreen: React.FC<ChatRoomScreenParams> = ({
   history,
   chatId,
@@ -96,6 +101,37 @@ const ChatRoomScreen: React.FC<ChatRoomScreenParams> = ({
               },
             });
           }
+
+          let clientChatsData;
+          try {
+            clientChatsData = client.readQuery<ChatsResult>({
+              query: queries.chats,
+            });
+          } catch (e) {
+            return;
+          }
+
+          if (!clientChatsData || clientChatsData === null) {
+            return null;
+          }
+          if (!clientChatsData.chats || clientChatsData.chats === undefined) {
+            return null;
+          }
+          const chats = clientChatsData.chats;
+
+          const chatIndex = chats.findIndex((currentChat: any) => currentChat.id === chatId);
+          if (chatIndex === -1) return;
+          const chatWhereAdded = chats[chatIndex];
+
+          chatWhereAdded.lastMessage = data.addMessage;
+          // The chat will appear at the top of the ChatsList component
+          chats.splice(chatIndex, 1);
+          chats.unshift(chatWhereAdded);
+
+          client.writeQuery({
+            query: queries.chats,
+            data: { chats: chats },
+          });
         },
       });
     },

src/components/ChatsListScreen/ChatsList.test.tsx

@@ -11,6 +11,7 @@ import {
 import { createBrowserHistory } from 'history';
 import { mockApolloClient } from '../../test-helpers';
 import ChatsList, { getChatsQuery } from './ChatsList';
+import * as queries from '../../graphql/queries';
 
 describe('ChatsList', () => {
   afterEach(() => {
@@ -29,7 +30,7 @@ describe('ChatsList', () => {
   it('renders fetched chats data', async () => {
     const client = mockApolloClient([
       {
-        request: { query: getChatsQuery },
+        request: { query: queries.chats },
         result: {
           data: {
             chats: [
@@ -75,7 +76,7 @@ describe('ChatsList', () => {
   it('should navigate to the target chat room on chat item click', async () => {
     const client = mockApolloClient([
       {
-        request: { query: getChatsQuery },
+        request: { query: queries.chats },
         result: {
           data: {
             chats: [

src/components/ChatsListScreen/ChatsList.tsx

@@ -4,8 +4,8 @@ import { List, ListItem } from '@material-ui/core';
 import styled from 'styled-components';
 import { useCallback } from 'react';
 import { History } from 'history';
-import gql from 'graphql-tag';
 import { useQuery } from '@apollo/react-hooks';
+import * as queries from '../../graphql/queries';
 
 const Container = styled.div`
   height: calc(100% - 56px);
@@ -59,27 +59,12 @@ const MessageDate = styled.div`
   font-size: 13px;
 `;
 
-export const getChatsQuery = gql`
-  query GetChats {
-    chats {
-      id
-      name
-      picture
-      lastMessage {
-        id
-        content
-        createdAt
-      }
-    }
-  }
-`;
-
 interface ChatsListProps {
   history: History;
 }
 
 const ChatsList: React.FC<ChatsListProps> = ({ history }) => {
-  const { data } = useQuery<any>(getChatsQuery);
+  const { data } = useQuery<any>(queries.chats);
 
   const navToChat = useCallback(
     (chat) => {

src/graphql/queries/chats.query.ts

@@ -0,0 +1,16 @@
+import gql from 'graphql-tag';
+
+export default gql`
+  query Chats {
+    chats {
+      id
+      name
+      picture
+      lastMessage {
+        id
+        content
+        createdAt
+      }
+    }
+  }
+`;

src/graphql/queries/index.ts

@@ -0,0 +1 @@
+export { default as chats } from './chats.query';