diff --git a/layouts/LayoutDefault.tsx b/layouts/LayoutDefault.tsx index 2efc0fa..7f34c48 100644 --- a/layouts/LayoutDefault.tsx +++ b/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(); - if (!res?.id) return; - addConversation(res); - await navigate(`/chat/${res.id}`); + + const newConversation = await startConversation.mutateAsync(); + if (!newConversation?.id) return; + addConversation(newConversation); + await navigate(`/chat/${newConversation.id}`); } return (