Fix: FacilityData not populating on Edit (#10077)

public/locale/en.json

@@ -675,8 +675,8 @@
   "copying_is_not_allowed": "Copying is not allowed",
   "could_not_load_page": "We are facing some difficulties showing the Page you were looking for. Our Engineers have been notified and we'll make sure that this is resolved on the fly!",
   "countries_travelled": "Countries travelled",
-  "cover_image_deleted.": "Cover image deleted.",
-  "cover_image_updated.": "Cover image updated.",
+  "cover_image_deleted": "Cover Image Deleted",
+  "cover_image_updated": "Cover Image Updated",
   "covid_19_cat_gov": "Covid_19 Clinical Category as per Govt. of Kerala guideline (A/B/C)",
   "covid_19_death_reporting_form_1": "Covid-19 Death Reporting : Form 1",
   "covid_details": "Covid Details",

src/components/Facility/FacilityForm.tsx

@@ -119,7 +119,12 @@ export default function FacilityForm(props: FacilityProps) {
     }),
     onSuccess: (_data: FacilityModel) => {
       toast.success(t("facility_updated_successfully"));
-      queryClient.invalidateQueries({ queryKey: ["organizationFacilities"] });
+      queryClient.invalidateQueries({
+        queryKey: ["organizationFacilities"],
+      });
+      queryClient.invalidateQueries({
+        queryKey: ["facility"],
+      });
       form.reset();
       onSubmitSuccess?.();
     },

src/components/Facility/FacilityHome.tsx

@@ -1,5 +1,5 @@
 import careConfig from "@careConfig";
-import { useQuery } from "@tanstack/react-query";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { Hospital, MapPin, MoreVertical, Settings } from "lucide-react";
 import { navigate } from "raviger";
 import { useState } from "react";
@@ -91,12 +91,9 @@ export const FacilityHome = ({ facilityId }: Props) => {
   const { t } = useTranslation();
   const [openDeleteDialog, setOpenDeleteDialog] = useState(false);
   const [editCoverImage, setEditCoverImage] = useState(false);
+  const queryClient = useQueryClient();
 
-  const {
-    data: facilityData,
-    isLoading,
-    refetch: facilityFetch,
-  } = useQuery<FacilityData>({
+  const { data: facilityData, isLoading } = useQuery<FacilityData>({
     queryKey: ["facility", facilityId],
     queryFn: query(routes.facility.show, {
       pathParams: { id: facilityId },
@@ -134,7 +131,9 @@ export const FacilityHome = ({ facilityId }: Props) => {
       async (xhr: XMLHttpRequest) => {
         if (xhr.status === 200) {
           await sleep(1000);
-          facilityFetch();
+          queryClient.invalidateQueries({
+            queryKey: ["facility", facilityId],
+          });
           toast.success(t("cover_image_updated"));
           setEditCoverImage(false);
         } else {
@@ -154,7 +153,9 @@ export const FacilityHome = ({ facilityId }: Props) => {
     });
     if (res?.ok) {
       toast.success(t("cover_image_deleted"));
-      facilityFetch();
+      queryClient.invalidateQueries({
+        queryKey: ["facility", facilityId],
+      });
       setEditCoverImage(false);
     } else {
       onError();

src/pages/Organization/components/EditFacilitySheet.tsx

@@ -1,4 +1,3 @@
-import { useQueryClient } from "@tanstack/react-query";
 import { t } from "i18next";
 import { useState } from "react";
 
@@ -20,7 +19,6 @@ interface Props {
 }
 
 export default function EditFacilitySheet({ facilityId, trigger }: Props) {
-  const queryClient = useQueryClient();
   const [open, setOpen] = useState(false);
 
   return (
@@ -36,9 +34,6 @@ export default function EditFacilitySheet({ facilityId, trigger }: Props) {
             facilityId={facilityId}
             onSubmitSuccess={() => {
               setOpen(false);
-              queryClient.invalidateQueries({
-                queryKey: [["facility", facilityId], "organizationFacilities"],
-              });
             }}
           />
         </div>