invalidate react-query queries upon mutations

layouts/LayoutDefault.tsx

@@ -31,6 +31,7 @@ import {
   QueryClientProvider,
   useMutation,
   useQuery,
+  useQueryClient,
 } from "@tanstack/react-query";
 import {
   createTRPCClient,
@@ -137,13 +138,27 @@ function NavLinkChat() {
   const pageContext = usePageContext();
   const { urlPathname } = pageContext;
   const trpc = useTRPC();
+  const queryClient = useQueryClient();
   // const
   const startConversation = useMutation(
-    trpc.chat.conversations.start.mutationOptions()
+    trpc.chat.conversations.start.mutationOptions({
+      onSuccess: () => {
+        queryClient.invalidateQueries({
+          queryKey: trpc.chat.conversations.fetchAll.queryKey(),
+        });
+      },
+    })
   );
   const deleteConversation = useMutation(
-    trpc.chat.conversations.deleteOne.mutationOptions()
+    trpc.chat.conversations.deleteOne.mutationOptions({
+      onSuccess: () => {
+        queryClient.invalidateQueries({
+          queryKey: trpc.chat.conversations.fetchAll.queryKey(),
+        });
+      },
+    })
   );
+
   const { data: conversations } = useQuery(
     trpc.chat.conversations.fetchAll.queryOptions()
   );
@@ -153,12 +168,22 @@ function NavLinkChat() {
   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(),
+      //     });
+      //   },
+      // }
+    );
     removeConversation(conversationId);
-    await deleteConversation.mutateAsync({ id: conversationId });
+
-    const res = await startConversation.mutateAsync();
+    const newConversation = await startConversation.mutateAsync();
-    if (!res?.id) return;
+    if (!newConversation?.id) return;
-    addConversation(res);
+    addConversation(newConversation);
-    await navigate(`/chat/${res.id}`);
+    await navigate(`/chat/${newConversation.id}`);
   }
 
   return (