Step 12.5: Update cache on chat removal

src/components/ChatRoomScreen/ChatNavbar.tsx

@@ -8,6 +8,7 @@ import { useCallback } from 'react';
 import styled from 'styled-components';
 import { History } from 'history';
 import { useRemoveChatMutation } from '../../graphql/types';
+import { eraseChat } from '../../services/cache.service';
 
 const Container = styled(Toolbar)`
   padding: 0;
@@ -67,6 +68,11 @@ const ChatNavbar: React.FC<ChatNavbarProps> = ({ chat, history }) => {
     variables: {
       chatId: chat.id,
     },
+    update: (client, { data }) => {
+      if (data && data.removeChat) {
+        eraseChat(client, data.removeChat);
+      }
+    },
   });
 
   const handleRemoveChat = useCallback(() => {

src/components/ChatRoomScreen/index.tsx

@@ -1,6 +1,7 @@
 import gql from 'graphql-tag';
 import React from 'react';
 import { useCallback } from 'react';
+import { Redirect } from 'react-router-dom';
 import styled from 'styled-components';
 import ChatNavbar from './ChatNavbar';
 import MessageInput from './MessageInput';
@@ -95,6 +96,11 @@ const ChatRoomScreen: React.FC<ChatRoomScreenParams> = ({
   if (loadingChat) return null;
   if (chat === null) return null;
 
+  // Chat was probably removed from cache by the subscription handler
+  if (!chat) {
+    return <Redirect to="/chats" />;
+  }
+
   return (
     <Container>
       {chat?.id && <ChatNavbar chat={chat} history={history} />}

src/graphql/subscriptions/chatRemoved.subscription.ts

@@ -0,0 +1,7 @@
+import gql from 'graphql-tag';
+
+export default gql`
+  subscription ChatRemoved {
+    chatRemoved
+  }
+`;

src/graphql/subscriptions/index.ts

@@ -1,2 +1,3 @@
 export { default as messageAdded } from './messageAdded.subscription';
 export { default as chatAdded } from './chatAdded.subscription';
+export { default as chatRemoved } from './chatRemoved.subscription';

src/services/cache.service.ts

@@ -8,6 +8,7 @@ import {
   ChatsQuery,
   ChatFragment,
   useChatAddedSubscription,
+  useChatRemovedSubscription,
 } from '../graphql/types';
 
 type Client = Pick<
@@ -31,6 +32,14 @@ export const useCacheService = () => {
       }
     },
   });
+
+  useChatRemovedSubscription({
+    onSubscriptionData: ({ client, subscriptionData: { data } }) => {
+      if (data) {
+        eraseChat(client, data.chatRemoved);
+      }
+    },
+  });
 };
 
 export const writeMessage = (client: Client, message: MessageFragment) => {
@@ -137,3 +146,49 @@ export const writeChat = (client: Client, chat: ChatFragment) => {
     data: { chats },
   });
 };
+
+export const eraseChat = (client: Client, chatId: string) => {
+  const chatType = {
+    __typename: 'Chat',
+    id: chatId,
+  };
+
+  const chatIdFromObject = defaultDataIdFromObject(chatType);
+  if (chatIdFromObject === null) {
+    return;
+  }
+
+  client.writeFragment({
+    id: chatIdFromObject,
+    fragment: fragments.fullChat,
+    fragmentName: 'FullChat',
+    data: null,
+  });
+
+  let data: ChatsQuery | null;
+  try {
+    data = client.readQuery<ChatsQuery>({
+      query: queries.chats,
+    });
+  } catch (e) {
+    return;
+  }
+
+  if (!data || !data.chats) return;
+
+  const chats = data.chats;
+
+  if (!chats) return;
+
+  const chatIndex = chats.findIndex((c: any) => c.id === chatId);
+
+  if (chatIndex === -1) return;
+
+  // The chat will appear at the top of the ChatsList component
+  chats.splice(chatIndex, 1);
+
+  client.writeQuery({
+    query: queries.chats,
+    data: { chats: chats },
+  });
+};