optimistically update "delete conversation" mutation

layouts/LayoutDefault.tsx

@@ -151,10 +151,44 @@ function NavLinkChat() {
   );
   const deleteConversation = useMutation(
     trpc.chat.conversations.deleteOne.mutationOptions({
-      onSuccess: () => {
-        queryClient.invalidateQueries({
+      onMutate: async ({ id: conversationIdToDelete }) => {
+        /** Cancel affected queries that may be in-flight: */
+        await queryClient.cancelQueries({
           queryKey: trpc.chat.conversations.fetchAll.queryKey(),
         });
+
+        /** Optimistically update the affected queries in react-query's cache: */
+        const previousConversations = await queryClient.getQueryData(
+          trpc.chat.conversations.fetchAll.queryKey()
+        );
+        if (!previousConversations) {
+          return {
+            previousConversations: [],
+            newConversations: [],
+          };
+        }
+        const newConversations = previousConversations.filter(
+          (c) => c.id !== conversationIdToDelete
+        );
+        queryClient.setQueryData(
+          trpc.chat.conversations.fetchAll.queryKey(),
+          newConversations
+        );
+
+        return { previousConversations, newConversations };
+      },
+      onSettled: async (data, variables, context) => {
+        await queryClient.invalidateQueries({
+          queryKey: trpc.chat.conversations.fetchAll.queryKey(),
+        });
+      },
+      onError: async (error, variables, context) => {
+        console.error(error);
+        if (!context) return;
+        queryClient.setQueryData(
+          trpc.chat.conversations.fetchAll.queryKey(),
+          context.previousConversations
+        );
       },
     })
   );
@@ -162,29 +196,34 @@ function NavLinkChat() {
   const { data: conversations } = useQuery(
     trpc.chat.conversations.fetchAll.queryOptions()
   );
-  // TODO: should we be using zustand for this, or trpc/react-query's useMutation?
-  const addConversation = useStore((state) => state.addConversation);
-  const removeConversation = useStore((state) => state.removeConversation);
-  const conversationId = useStore((state) => state.selectedConversationId);
-
-  async function handleDeleteConversation(conversationId: string) {
-    await deleteConversation.mutateAsync(
-      { id: conversationId }
-      // {
-      //   onSuccess: () => {
-      //     queryClient.invalidateQueries({
-      //       queryKey: trpc.chat.conversations.fetchAll.queryKey(),
-      //     });
-      //   },
-      // }
+  const selectedConversationId = useStore(
+    (state) => state.selectedConversationId
   );
-    removeConversation(conversationId);
 
+  async function handleDeleteConversation(conversationIdToDelete: string) {
+    await deleteConversation.mutateAsync(
+      { id: conversationIdToDelete },
+      {
+        onSuccess: async (x, y, { newConversations }) => {
+          /** If the selected conversation was deleted, navigate/select a
+           * different conversation (creating a new one if necessary): */
+          if (conversationIdToDelete === selectedConversationId) {
+            if (newConversations && newConversations.length > 0) {
+              // Navigate to the first conversation
+              const lastConversation =
+                newConversations[newConversations.length - 1];
+              await navigate(`/chat/${lastConversation.id}`);
+            } else {
+              // No conversations left, create a new one
               const newConversation = await startConversation.mutateAsync();
               if (!newConversation?.id) return;
-    addConversation(newConversation);
               await navigate(`/chat/${newConversation.id}`);
             }
+          }
+        },
+      }
+    );
+  }
 
   return (
     <NavLink
@@ -202,7 +241,7 @@ function NavLinkChat() {
               e.stopPropagation();
               startConversation.mutateAsync().then((res) => {
                 if (!res?.id) return;
-                addConversation(res);
+                // addConversation(res);
                 navigate(`/chat/${res.id}`);
               });
             }}
@@ -262,7 +301,7 @@ function NavLinkChat() {
             </>
           }
           variant="subtle"
-          active={conversation.id === conversationId}
+          active={conversation.id === selectedConversationId}
         />
       ))}
     </NavLink>