improve: upgrade node to 20, upgrade react-query to v4

2025-04-27 00:36:42 +01:00
parent 9ea44385ee
commit 1ce2eebbfa
22 changed files with 309 additions and 218 deletions
--- a/src/App.js
+++ b/src/App.js
@@ -1,5 +1,7 @@
 import React from "react";
 import {BrowserRouter as Router, Navigate, Route, Routes} from "react-router-dom";
+import { Provider } from 'react-redux';
+import { store } from './store';
 import MainNavigation from "./components/Navigations/MainNavigation";
 import SideNavigation from "./components/Navigations/SideNavigation";
 import MarkdownContent from "./components/Markdowns/MarkdownContent";
@@ -14,33 +16,35 @@ import MarkdownTemplateEditor from "./components/MarkdownTemplate/MarkdownTempla
 const App = () => {

    return (
-        <Router>
-            <div className="app-container">
-                <MainNavigation />
-                <div className="content-container">
-                    <SideNavigation />
-                    <main className="main-content">
-                        <Routes>
-                            <Route
-                                path="/"
-                                element={<Navigate to = "/markdown/1"/>}
-                            />
-                            <Route path="/testx" element={<h2>test2</h2>}/>
-                            <Route path="/markdown/:id" element={<MarkdownContent />} />
-                            <Route path="/callback" element={<Callback />} />
-                            <Route path="/test" element={<h1>TEST</h1>}></Route>
-                            <Route path="/markdown/create" element={<MarkdownEditor />} />
-                            <Route path="/markdown/edit/:id" element={<MarkdownEditor />} />
-                            <Route path="/popup_callback" element={<PopupCallback />} />
-                            <Route path="/silent_callback" element={<SilentCallback />} />
-                            <Route path="/template/create" element={<MarkdownTemplateEditor />} />
-                            <Route path="/template/edit/:id" element={<MarkdownTemplateEditor />} />
-                        </Routes>
-                    </main>
+        <Provider store={store}>
+            <Router>
+                <div className="app-container">
+                    <MainNavigation />
+                    <div className="content-container">
+                        <SideNavigation />
+                        <main className="main-content">
+                            <Routes>
+                                <Route
+                                    path="/"
+                                    element={<Navigate to = "/markdown/1"/>}
+                                />
+                                <Route path="/testx" element={<h2>test2</h2>}/>
+                                <Route path="/markdown/:id" element={<MarkdownContent />} />
+                                <Route path="/callback" element={<Callback />} />
+                                <Route path="/test" element={<h1>TEST</h1>}></Route>
+                                <Route path="/markdown/create" element={<MarkdownEditor />} />
+                                <Route path="/markdown/edit/:id" element={<MarkdownEditor />} />
+                                <Route path="/popup_callback" element={<PopupCallback />} />
+                                <Route path="/silent_callback" element={<SilentCallback />} />
+                                <Route path="/template/create" element={<MarkdownTemplateEditor />} />
+                                <Route path="/template/edit/:id" element={<MarkdownTemplateEditor />} />
+                            </Routes>
+                        </main>
+                    </div>
                </div>
-            </div>
-            <Footer />
-        </Router>
+                <Footer />
+            </Router>
+        </Provider>
    );
 };

--- a/src/components/Markdowns/MarkdownEditor.js
+++ b/src/components/Markdowns/MarkdownEditor.js
@@ -23,7 +23,7 @@ const MarkdownEditor = () => {
    const [isRawMode, setIsRawMode] = useState(false);
    const [rawContent, setRawContent] = useState("");
    const [jsonError, setJsonError] = useState("");
-    const {data: markdown, isLoading, error} = useMarkdown(id);
+    const {data: markdown, isFetching: isMarkdownFetching, error} = useMarkdown(id);
    const saveMarkdown = useSaveMarkdown();
    const {data: setting, isFetching: isSettingFetching} = useMarkdownSetting(markdown?.setting_id);
    const {data: templateSetting, isFetching: isTemplateSettingFetching} = useMarkdownTemplateSetting(setting?.template_setting_id);
@@ -31,9 +31,9 @@ const MarkdownEditor = () => {
    const updateTemplateSetting = useUpdateMarkdownTemplateSetting();
    const createTemplateSetting = useCreateMarkdownTemplateSetting();
    const updateSetting = useUpdateMarkdownSetting();
-    const {data: templates} = useMarkdownTemplates();
+    const {data: templates, isFetching: templatesAreFetching} = useMarkdownTemplates();

-    const notReady = isLoading || isTemplateFetching || isSettingFetching || isTemplateSettingFetching;
+    const notReady = isMarkdownFetching || isTemplateFetching || isSettingFetching || isTemplateSettingFetching || templatesAreFetching;
    useEffect(() => {
        if(markdown){
            setTitle(markdown.title);
@@ -156,9 +156,16 @@ const MarkdownEditor = () => {
    if (!hasPermission)
        return <div className="notification is-danger">Permission Denied</div>;

-    if(notReady)
+    if(notReady) {
+        console.log("=============");
+        console.log("isMarkdownFetching", isMarkdownFetching );
+        console.log("isTemplateFetching", isTemplateFetching );
+        console.log("isSettingFetching", isSettingFetching );
+        console.log("isTemplateSettingFetching", isTemplateSettingFetching);
+        console.log( "TemplatesAreFetching", templatesAreFetching);
+        console.log("----------------");
        return <p>Loading...</p>;
-
+    }

    if(error)
        return <p>{error.message || "Failed to load markdown"}</p>;
--- a/src/components/Modals/PathSettingModal.js
+++ b/src/components/Modals/PathSettingModal.js
@@ -3,7 +3,8 @@ import {useCreatePathSetting, usePathSetting} from "../../utils/queries/path-set
 import WebhookSettingPanel from "../Settings/PathSettings/WebhookSettingPanel";
 import React, {useState} from "react";
 const PathSettingModal = ({ isOpen, path, onClose }) => {
-    const {data: pathSetting, isLoading: isPathSettingLoading} = usePathSetting(path?.setting_id || 0);
+    const settingId = path?.setting_id || 0;
+    const {data: pathSetting, isLoading: isPathSettingLoading} = usePathSetting(settingId);
    const createPathSetting = useCreatePathSetting();
    const updatePath = useUpdatePath();

@@ -17,7 +18,7 @@ const PathSettingModal = ({ isOpen, path, onClose }) => {
    };


-    if(isPathSettingLoading)
+    if(settingId && isPathSettingLoading)
        return (<p>Loading...</p>);

    return (
@@ -73,4 +74,4 @@ const PathSettingModal = ({ isOpen, path, onClose }) => {

 };

-export default PathSettingModal;
+export default PathSettingModal;
--- a/src/components/Navigations/PathNode.js
+++ b/src/components/Navigations/PathNode.js
@@ -1,4 +1,6 @@
 import React, {useState} from "react";
+import { useSelector, useDispatch } from 'react-redux';
+import { toggleNodeExpansion } from '../../store/navigationSlice';
 import { Link } from "react-router-dom";
 import PermissionGuard from "../PermissionGuard";
 import "./PathNode.css";
@@ -9,10 +11,13 @@ import PathSettingModal from "../Modals/PathSettingModal";

 const PathNode = ({ path, isRoot = false }) => {
    const [isPathSettingModalOpen, setIsPathSettingModalOpen] = useState(false);
-    const [isExpanded, setIsExpanded] = useState(isRoot);
    const [isEditing, setIsEditing] = useState(false);
    const [newName, setNewName] = useState(path.name || "");

+    const expandedNodes = useSelector(state => state.navigation.expandedNodes);
+    const dispatch = useDispatch();
+    const isExpanded = isRoot || expandedNodes[path.id];
+
    const deletePath = useDeletePath();
    const updatePath = useUpdatePath();

@@ -23,11 +28,13 @@ const PathNode = ({ path, isRoot = false }) => {


    const expand = () => {
-        if(!isExpanded)
-            setIsExpanded(true);
+        if (!isExpanded) {
+            dispatch(toggleNodeExpansion(path.id));
+        }
    };
+
    const toggleExpand = () => {
-        setIsExpanded(!isExpanded);
+        dispatch(toggleNodeExpansion(path.id));
    };

    const handleSave = () => {
--- a/src/components/Navigations/SideNavigation.js
+++ b/src/components/Navigations/SideNavigation.js
@@ -1,4 +1,6 @@
 import React, { useContext, useEffect } from 'react';
+import { useSelector, useDispatch } from 'react-redux';
+import { setSelectedTab } from '../../store/navigationSlice';
 import "./SideNavigation.css";
 import TreeTab from "./SideTabs/TreeTab";
 import TemplateTab from "./SideTabs/TemplateTab";
@@ -6,7 +8,8 @@ import { AuthContext } from "../../AuthProvider";

 const SideNavigation = () => {
    const { roles } = useContext(AuthContext);
-    const [selectedTab, setSelectedTab] = React.useState("tree");
+    const selectedTab = useSelector(state => state.navigation.selectedTab);
+    const dispatch = useDispatch();

    const allTabs = [
        { id: "tree", label: "Tree", component: <TreeTab /> },
@@ -19,9 +22,9 @@ const SideNavigation = () => {

    useEffect(() => {
        if (!visibleTabs.find(tab => tab.id === selectedTab)) {
-            setSelectedTab(visibleTabs[0]?.id || "");
+            dispatch(setSelectedTab(visibleTabs[0]?.id || ""));
        }
-    }, [visibleTabs, selectedTab]);
+    }, [visibleTabs, selectedTab, dispatch]);


    const current = visibleTabs.find(t => t.id === selectedTab);
@@ -35,7 +38,7 @@ const SideNavigation = () => {
                            key={tab.id}
                            className={tab.id === selectedTab ? "is-active" : ""}
                        >
-                            <a onClick={() => setSelectedTab(tab.id)}>
+                            <a onClick={() => dispatch(setSelectedTab(tab.id))}>
                                {tab.label}
                            </a>
                        </li>
--- a/src/components/PathManager.js
+++ b/src/components/PathManager.js
@@ -1,6 +1,6 @@
 import React, {useEffect, useState, useRef, useContext} from "react";
 import {useCreatePath, usePaths} from "../utils/queries/path-queries";
-import { useQueryClient } from "react-query";
+import { useQueryClient } from "@tanstack/react-query";
 import "./PathManager.css";
 import {fetch_} from "../utils/request-utils";
 import {ConfigContext} from "../ConfigProvider";
--- a/src/index.js
+++ b/src/index.js
@@ -3,7 +3,7 @@ import ReactDOM from "react-dom/client";
 import App from "./App";
 import AuthProvider, {AuthContext} from "./AuthProvider";
 import "bulma/css/bulma.min.css";
-import {QueryClient, QueryClientProvider} from "react-query"
+import {QueryClient, QueryClientProvider} from "@tanstack/react-query"
 import ConfigProvider from "./ConfigProvider";

 const queryClient = new QueryClient({
@@ -11,7 +11,7 @@ const queryClient = new QueryClient({
        queries: {
            retry: 2,
            refetchOnWindowFocus: false,
-            staleTimeout: 5 * 60 * 1000,
+            staleTime: 5 * 60 * 1000,
            onError: (error) => {
                if (error.message === "Unauthorized"){
                    const {logout} = queryClient
@@ -38,7 +38,7 @@ const EnhancedAuthProvider = ({children}) => {
    };

    React.useEffect(() => {
-        queryClient.setQueryDefaults("auths", {
+        queryClient.setQueryDefaults(["auths"], {
            context: {logout}
        });
    }, [logout]);
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -0,0 +1,8 @@
+import { configureStore } from '@reduxjs/toolkit';
+import navigationReducer from './navigationSlice';
+
+export const store = configureStore({
+  reducer: {
+    navigation: navigationReducer,
+  },
+});
--- a/src/store/navigationSlice.js
+++ b/src/store/navigationSlice.js
@@ -0,0 +1,24 @@
+import { createSlice } from '@reduxjs/toolkit';
+
+const navigationSlice = createSlice({
+  name: 'navigation',
+  initialState: {
+    selectedTab: "tree",
+    expandedNodes: {}
+  },
+  reducers: {
+    setSelectedTab: (state, action) => {
+      state.selectedTab = action.payload;
+    },
+    toggleNodeExpansion: (state, action) => {
+      const nodeId = action.payload;
+      state.expandedNodes[nodeId] = !state.expandedNodes[nodeId];
+    },
+    setExpandedNodes: (state, action) => {
+      state.expandedNodes = action.payload;
+    }
+  }
+});
+
+export const { setSelectedTab, toggleNodeExpansion, setExpandedNodes } = navigationSlice.actions;
+export default navigationSlice.reducer;
--- a/src/utils/queries/markdown-permission-setting-queries.js
+++ b/src/utils/queries/markdown-permission-setting-queries.js
@@ -1,12 +1,12 @@
 import {useConfig} from "../../ConfigProvider";
-import {useMutation, useQuery, useQueryClient} from "react-query";
+import {useMutation, useQuery, useQueryClient} from "@tanstack/react-query";
 import {fetch_} from "../request-utils";

 export const useMarkdownPermissionSettings = () => {
    const config = useConfig();
    const queryClient = useQueryClient();
    return useQuery(
-        "markdown_permission_settings",
+        ["markdown_permission_settings"],
        () => fetch_(`${config.BACKEND_HOST}/api/setting/markdown/permission/`), {
            onSuccess: (data) => {
                if(data){
@@ -38,7 +38,7 @@ export const useCreateMarkdownPermissionSetting = () => {
    }), {
        onSuccess: (data) => {
            queryClient.invalidateQueries(["markdown_permission_setting", data.id]);
-            queryClient.invalidateQueries("markdown_permission_settings");
+            queryClient.invalidateQueries(["markdown_permission_settings"]);
        }
    });
 };
@@ -53,7 +53,7 @@ export const useUpdateMarkdownPermissionSetting = () => {
        }),{
            onSuccess: (res) => {
                queryClient.invalidateQueries(["markdown_permission_setting", res.id]);
-                queryClient.invalidateQueries("markdown_permission_settings");
+                queryClient.invalidateQueries(["markdown_permission_settings"]);
            }
        }
    );
@@ -68,8 +68,8 @@ export const useDeleteMarkdownPermissionSetting = () => {
        }), {
            onSuccess: (res, variables) => {
                queryClient.invalidateQueries(["markdown_permission_setting", variables.id]);
-                queryClient.invalidateQueries("markdown_permission_settings");
+                queryClient.invalidateQueries(["markdown_permission_settings"]);
            }
        }
    );
-};
+};
--- a/src/utils/queries/markdown-queries.js
+++ b/src/utils/queries/markdown-queries.js
@@ -1,4 +1,4 @@
-import {useQuery, useMutation, useQueryClient} from 'react-query';
+import {useQuery, useMutation, useQueryClient} from '@tanstack/react-query';
 import {fetch_} from "../request-utils";
 import {useConfig} from "../../ConfigProvider";

@@ -70,7 +70,7 @@ export const useSaveMarkdown = () => {
        onSuccess: (res) => {
            queryClient.invalidateQueries(["markdownsByPath", res.path_id]);
            queryClient.invalidateQueries(["markdown", res.id]);
-            queryClient.invalidateQueries("tree");
+            queryClient.invalidateQueries(["tree"]);
        },
    });
 };
@@ -87,8 +87,8 @@ export const useMoveMarkdown = () => {
        },
        {
            onSuccess: () => {
-                queryClient.invalidateQueries("paths");
-                queryClient.invalidateQueries("tree");
+                queryClient.invalidateQueries(["paths"]);
+                queryClient.invalidateQueries(["tree"]);
            }
        }
    );
@@ -111,4 +111,3 @@ export const useLinks = () => {
    const config = useConfig();
    return useQuery(["links"], () => fetch_(`${config.BACKEND_HOST}/api/markdown/links`));
 }
-
--- a/src/utils/queries/markdown-setting-queries.js
+++ b/src/utils/queries/markdown-setting-queries.js
@@ -1,12 +1,12 @@
 import {useConfig} from "../../ConfigProvider";
-import {useMutation, useQuery, useQueryClient} from "react-query";
+import {useMutation, useQuery, useQueryClient} from "@tanstack/react-query";
 import {fetch_} from "../request-utils";

 export const useMarkdownSettings = () => {
    const config = useConfig();
    const queryClient = useQueryClient();
    return useQuery(
-        "markdown_setting",
+        ["markdown_setting"],
        () => fetch_(`${config.BACKEND_HOST}/api/setting/markdown/`),
        {
            onSuccess: (data) => {
--- a/src/utils/queries/markdown-template-queries.js
+++ b/src/utils/queries/markdown-template-queries.js
@@ -1,5 +1,5 @@
 import {useConfig} from "../../ConfigProvider";
-import {useMutation, useQuery, useQueryClient} from "react-query";
+import {useMutation, useQuery, useQueryClient} from "@tanstack/react-query";
 import {fetch_} from "../request-utils";
 import {template} from "@babel/core";
 import {data} from "react-router-dom";
@@ -19,7 +19,7 @@ export const useMarkdownTemplates = () => {
    const config = useConfig();
    const queryClient = useQueryClient();
    return useQuery(
-        "markdown_templates",
+        ["markdown_templates"],
        () => fetch_(`${config.BACKEND_HOST}/api/template/markdown/`), {
            onSuccess: (data) => {
                if(data){
@@ -43,7 +43,7 @@ export const useUpdateMarkdownTemplate = () => {
        {
            onSuccess: (data) => {
                queryClient.invalidateQueries(["markdown_template", data.id]);
-                queryClient.invalidateQueries("markdown_templates");
+                queryClient.invalidateQueries(["markdown_templates"]);
            }
        }
    );
@@ -59,7 +59,7 @@ export const useCreateMarkdownTemplate = () => {
        }),{
            onSuccess: (data) => {
                queryClient.invalidateQueries(["markdown_template", data.id]);
-                queryClient.invalidateQueries("markdown_templates");
+                queryClient.invalidateQueries(["markdown_templates"]);
            }
        }
    );
@@ -74,7 +74,7 @@ export const useDeleteMarkdownTemplate = () => {
        }), {
            onSuccess: (res, variables) => {
                queryClient.invalidateQueries(["markdown_template", variables]);
-                queryClient.invalidateQueries("markdown_templates");
+                queryClient.invalidateQueries(["markdown_templates"]);
            }
        }
    )
@@ -95,7 +95,7 @@ export const useSaveMarkdownTemplate = () => {
    },{
        onSuccess: (data) => {
            queryClient.invalidateQueries(["markdown_template", data.id]);
-            queryClient.invalidateQueries("markdown_templates");
+            queryClient.invalidateQueries(["markdown_templates"]);
        }
    });
 }
--- a/src/utils/queries/markdown-template-setting-queries.js
+++ b/src/utils/queries/markdown-template-setting-queries.js
@@ -1,12 +1,12 @@
 import {useConfig} from "../../ConfigProvider";
-import {useMutation, useQuery, useQueryClient} from "react-query";
+import {useMutation, useQuery, useQueryClient} from "@tanstack/react-query";
 import {fetch_} from "../request-utils";

 export const useMarkdownTemplateSettings = () => {
    const config = useConfig();
    const queryClient = useQueryClient();
    return useQuery(
-        "markdown_template_settings",
+        ["markdown_template_settings"],
        () => fetch_(`${config.BACKEND_HOST}/api/setting/markdown/template/`), {
            onSuccess: (data) => {
                if(data){
@@ -53,7 +53,7 @@ export const useUpdateMarkdownTemplateSetting = () => {
        }),{
            onSuccess: (res) => {
                queryClient.invalidateQueries(["markdown_template_setting", res.id]);
-                queryClient.invalidateQueries("markdown_template_settings");
+                queryClient.invalidateQueries(["markdown_template_settings"]);
            }
        }
    );
--- a/src/utils/queries/path-queries.js
+++ b/src/utils/queries/path-queries.js
@@ -1,4 +1,4 @@
-import { useQuery, useMutation, useQueryClient } from "react-query";
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
 import { fetch_ } from "../request-utils";
 import {useConfig} from "../../ConfigProvider";

@@ -47,7 +47,7 @@ export const useCreatePath = () => {
        {
            onSuccess: (res) => {
                queryClient.invalidateQueries(["paths", res.parent_id]);
-                queryClient.invalidateQueries("tree");
+                queryClient.invalidateQueries(["tree"]);
            },
        }
    );
@@ -66,7 +66,7 @@ export const useUpdatePath = () => {
            onSuccess: (res) => {
                queryClient.invalidateQueries(["paths", res.parent_id]);
                queryClient.invalidateQueries(["path", res.id]);
-                queryClient.invalidateQueries("tree");
+                queryClient.invalidateQueries(["tree"]);
            },
        }
    );
@@ -82,8 +82,8 @@ export const useDeletePath = () => {
        }),
        {
            onSuccess: () => {
-                queryClient.invalidateQueries("paths");
-                queryClient.invalidateQueries("tree");
+                queryClient.invalidateQueries(["paths"]);
+                queryClient.invalidateQueries(["tree"]);
            },
        }
    );
@@ -101,8 +101,8 @@ export const useMovePath = () => {
        },
        {
            onSuccess: () => {
-                queryClient.invalidateQueries("paths");
-                queryClient.invalidateQueries("tree");
+                queryClient.invalidateQueries(["paths"]);
+                queryClient.invalidateQueries(["tree"]);
            }
        }
    );
--- a/src/utils/queries/path-setting-queries.js
+++ b/src/utils/queries/path-setting-queries.js
@@ -1,5 +1,5 @@
 import {useConfig} from "../../ConfigProvider";
-import {useMutation, useQuery, useQueryClient} from "react-query";
+import {useMutation, useQuery, useQueryClient} from "@tanstack/react-query";
 import {fetch_} from "../request-utils";

 export const usePathSettings = () => {
@@ -40,7 +40,7 @@ export const useCreatePathSetting = () => {
        }), {
            onSuccess: (data) => {
                queryClient.invalidateQueries(["path_setting", data.id]);
-                queryClient.invalidateQueries("path_settings");
+                queryClient.invalidateQueries(["path_settings"]);
            }
        }
    );
@@ -57,7 +57,7 @@ export const useUpdatePathSetting = () => {
        }), {
            onSuccess: (data, variables) => {
                queryClient.invalidateQueries(["path_setting", variables.id]);
-                queryClient.invalidateQueries("path_settings");
+                queryClient.invalidateQueries(["path_settings"]);
            }
        }
    );
@@ -73,7 +73,7 @@ export const useDeletePathSetting = () => {
        }),{
            onSuccess: (data, variables) => {
                queryClient.invalidateQueries(["path_setting", variables.id]);
-                queryClient.invalidateQueries("path_settings");
+                queryClient.invalidateQueries(["path_settings"]);
            }
        }
    );
--- a/src/utils/queries/tree-queries.js
+++ b/src/utils/queries/tree-queries.js
@@ -1,4 +1,4 @@
-import {useQuery, useMutation, useQueryClient} from "react-query";
+import {useQuery, useMutation, useQueryClient} from "@tanstack/react-query";
 import {fetch_} from "../request-utils";
 import {useConfig} from "../../ConfigProvider";

@@ -7,13 +7,13 @@ export const useTree = () => {
    const queryClient = useQueryClient();
    const config = useConfig();
    return useQuery(
-        "tree",
+        ["tree"],
        () => fetch_(`${config.BACKEND_HOST}/api/tree/`),
        {
            onSuccess: data => {
                if(data)
-                    queryClient.setQueryData("tree", data);
+                    queryClient.setQueryData(["tree"], data);
            }
        }
    );
-}
+}
--- a/src/utils/queries/webhook-queries.js
+++ b/src/utils/queries/webhook-queries.js
@@ -1,12 +1,12 @@
 import {fetch_ } from "../request-utils"
 import {useConfig} from "../../ConfigProvider";
-import {useMutation, useQuery, useQueryClient} from "react-query";
+import {useMutation, useQuery, useQueryClient} from "@tanstack/react-query";

 export const useWebhooks = () =>{
    const queryClient = useQueryClient();
    const config = useConfig();
    return useQuery(
-        "webhooks",
+        ["webhooks"],
        () => fetch_(`${config.BACKEND_HOST}/api/webhook/`),
        {
            onSuccess: (data) => {
@@ -33,7 +33,7 @@ export const useCreateWebhook = () => {
        }),
        {
            onSuccess: () => {
-                queryClient.invalidateQueries("webhooks");
+                queryClient.invalidateQueries(["webhooks"]);
            }
        }
    );
@@ -50,7 +50,7 @@ export const useUpdateWebhook = () =>{
        {
            onSuccess: (res) => {
                queryClient.invalidateQueries(["webhook", res.id]);
-                queryClient.invalidateQueries("webhooks");
+                queryClient.invalidateQueries(["webhooks"]);
            }
        }
    );
@@ -66,7 +66,7 @@ export const useDeleteWebhook = () => {
        {
            onSuccess: (res, variables) => {
                queryClient.invalidateQueries(["webhook", variables.id]);
-                queryClient.invalidateQueries("webhooks");
+                queryClient.invalidateQueries(["webhooks"]);
            }
        }
    )
@@ -76,7 +76,7 @@ export const useWebhookSettings = () => {
    const config = useConfig();
    const queryClient = useQueryClient();
    return useQuery(
-        "webhook_setting",
+        ["webhook_setting"],
        () => fetch_(`${config.BACKEND_HOST}/api/setting/path/webhook/`),
        {
            onSuccess: (data) => {
@@ -111,7 +111,7 @@ export const useCreateWebhookSetting = () => {
        }),{
            onSuccess: (res) => {
                queryClient.invalidateQueries(["webhook_setting", res.id]);
-                queryClient.invalidateQueries("webhook_setting");
+                queryClient.invalidateQueries(["webhook_setting"]);
            }
        }
    );
@@ -127,7 +127,7 @@ export const useUpdateWebhookSetting = () => {
        }),{
            onSuccess: (res, variables) => {
                queryClient.invalidateQueries(["webhook_setting", variables.id]);
-                queryClient.invalidateQueries("webhook_setting");
+                queryClient.invalidateQueries(["webhook_setting"]);
            }
        }
    );
@@ -144,9 +144,8 @@ export const useDeleteWebhookSetting = () => {
        {
            onSuccess: (res, variables) => {
                queryClient.invalidateQueries(["webhook_setting", variables.id]);
-                queryClient.invalidateQueries("webhook_setting");
+                queryClient.invalidateQueries(["webhook_setting"]);
            }
        }
    );
 };
-