feat: invalidate fetch queries on creating new chats

insea-connect · May 23, 2024 · dd1f7c3 · dd1f7c3
1 parent 53b2868
commit dd1f7c3
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 1 deletion.
diff --git a/packages/insea-connect-ui/components/modal/new-conversation-modal.tsx b/packages/insea-connect-ui/components/modal/new-conversation-modal.tsx
@@ -10,7 +10,7 @@ import {
   DialogHeader,
   DialogTitle,
 } from "../ui/dialog";
-import { useQuery } from "@tanstack/react-query";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
 import axios from "axios";
 import { ALL_USERS_ENDPOINT } from "@/lib/constants";
 import { ScrollArea } from "../ui/scroll-area";
@@ -24,6 +24,7 @@ import { useState } from "react";
 import useUserProfile from "@/hooks/use-user-profile";
 
 const NewConversationModal = () => {
+  const queryClient = useQueryClient();
   const { data: session } = useSession();
   const { data: userProfile, isPending: isUserProfilePending } =
     useUserProfile();
@@ -90,6 +91,9 @@ const NewConversationModal = () => {
               onClick={() => {
                 const convId = generateConversationId(user.id, userProfile?.id);
                 router.push(`/chat/${convId}`);
+                queryClient.invalidateQueries({
+                  queryKey: ["conversations"],
+                });
                 setSearchTerm("");
                 onClose();
               }}

diff --git a/packages/insea-connect-ui/components/modal/new-group-modal.tsx b/packages/insea-connect-ui/components/modal/new-group-modal.tsx
@@ -29,6 +29,7 @@ import { useRouter } from "next/navigation";
 import { useModal } from "@/hooks/use-modal-store";
 import { CREATE_GROUP_ENDPOINT } from "@/lib/constants";
 import { useSession } from "next-auth/react";
+import { useQueryClient } from "@tanstack/react-query";
 
 const schema = z.object({
   name: z.string().min(1, { message: "Name is required" }),
@@ -37,6 +38,7 @@ const schema = z.object({
 
 const NewGroupModal = () => {
   const { data: session } = useSession();
+  const queryClient = useQueryClient();
   const { toast } = useToast();
   const router = useRouter();
   const { isOpen, onClose, type } = useModal();
@@ -65,6 +67,10 @@ const NewGroupModal = () => {
           },
         }
       );
+
+      queryClient.invalidateQueries({
+        queryKey: ["groups"],
+      });
       form.reset();
       router.push(`/chat/group-${data.id}`);
       onClose();