From 5dec9cca9b28fee67d53a311025d610e2dfcdddc Mon Sep 17 00:00:00 2001 From: anovazzi1 Date: Fri, 27 Sep 2024 12:12:49 -0300 Subject: [PATCH] fix: usePatchUpdateFlow to conditionally refetch queries based on the browser URL (#3915) * fix usePatchUpdateFlow to conditionally refetch queries based on the browser URL, preventing unecessary request * [autofix.ci] apply automated fixes * Refactor PageComponent to remove unnecessary query using useQueryClient * Refactor usePatchUpdateFlow to conditionally refetch queries based on the browser URL * [autofix.ci] apply automated fixes * Refactor PageComponent to remove unnecessary query using useQueryClient * Implement query cache cleanup on MainPage unmount * fix spelling --------- Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com> --- .../pages/FlowPage/components/PageComponent/index.tsx | 1 - .../src/pages/MainPage/pages/mainPage/index.tsx | 11 +++++++++-- 2 files changed, 9 insertions(+), 3 deletions(-) diff --git a/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx index aac6b8960..ac9dcdfee 100644 --- a/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx +++ b/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx @@ -8,7 +8,6 @@ import { track } from "@/customization/utils/analytics"; import useAutoSaveFlow from "@/hooks/flows/use-autosave-flow"; import useUploadFlow from "@/hooks/flows/use-upload-flow"; import { getNodeRenderType, isSupportedNodeTypes } from "@/utils/utils"; - import _, { cloneDeep } from "lodash"; import { KeyboardEvent, diff --git a/src/frontend/src/pages/MainPage/pages/mainPage/index.tsx b/src/frontend/src/pages/MainPage/pages/mainPage/index.tsx index 43719a6da..699314a42 100644 --- a/src/frontend/src/pages/MainPage/pages/mainPage/index.tsx +++ b/src/frontend/src/pages/MainPage/pages/mainPage/index.tsx @@ -3,8 +3,8 @@ import { useDeleteFolders } from "@/controllers/API/queries/folders"; import { useCustomNavigate } from "@/customization/hooks/use-custom-navigate"; import { track } from "@/customization/utils/analytics"; import useAlertStore from "@/stores/alertStore"; -import { useIsFetching } from "@tanstack/react-query"; -import { useState } from "react"; +import { useIsFetching, useQueryClient } from "@tanstack/react-query"; +import { useEffect, useState } from "react"; import { Outlet, useLocation } from "react-router-dom"; import DropdownButton from "../../../../components/dropdownButtonComponent"; import PageLayout from "../../../../components/pageLayout"; @@ -28,6 +28,13 @@ export default function HomePage(): JSX.Element { const setSuccessData = useAlertStore((state) => state.setSuccessData); const setErrorData = useAlertStore((state) => state.setErrorData); const folderToEdit = useFolderStore((state) => state.folderToEdit); + const queryClient = useQueryClient(); + + // cleanup the query cache when the component unmounts + // prevent unnecessary queries on flow update + useEffect(() => { + return () => queryClient.removeQueries({ queryKey: ["useGetFolder"] }); + }, []); const dropdownOptions = useDropdownOptions({ navigate,