refactor: reduce duplicated separately useSWR (#6153)

* refactor: reduce duplicated seperatlly useSWR

* refactor: streamline useSWR integration and improve error handling

src/components/setting/mods/sysproxy-viewer.tsx

@@ -22,8 +22,7 @@ import {
   useState,
 } from "react";
 import { useTranslation } from "react-i18next";
-import useSWR, { mutate } from "swr";
-import { getBaseConfig } from "tauri-plugin-mihomo-api";
+import { mutate } from "swr";
 
 import {
   BaseDialog,
@@ -113,6 +112,8 @@ export const SysproxyViewer = forwardRef<DialogRef>((props, ref) => {
   type AutoProxy = Awaited<ReturnType<typeof getAutotemProxy>>;
   const [autoproxy, setAutoproxy] = useState<AutoProxy>();
 
+  const { clashConfig } = useAppData();
+
   const {
     enable_system_proxy: enabled,
     proxy_auto_config,
@@ -148,13 +149,6 @@ export const SysproxyViewer = forwardRef<DialogRef>((props, ref) => {
     return "127.0.0.1,192.168.0.0/16,10.0.0.0/8,172.16.0.0/12,localhost,*.local,*.crashlytics.com,<local>";
   };
 
-  const { data: clashConfig } = useSWR("getClashConfig", getBaseConfig, {
-    revalidateOnFocus: false,
-    revalidateIfStale: true,
-    dedupingInterval: 1000,
-    errorRetryInterval: 5000,
-  });
-
   const prevMixedPortRef = useRef(clashConfig?.mixedPort);
 
   useEffect(() => {

src/pages/proxies.tsx

@@ -3,13 +3,13 @@ import { Box, Button, ButtonGroup } from "@mui/material";
 import { useLockFn } from "ahooks";
 import { useCallback, useEffect, useMemo, useReducer, useState } from "react";
 import { useTranslation } from "react-i18next";
-import useSWR from "swr";
-import { closeAllConnections, getBaseConfig } from "tauri-plugin-mihomo-api";
+import { closeAllConnections } from "tauri-plugin-mihomo-api";
 
 import { BasePage } from "@/components/base";
 import { ProviderButton } from "@/components/proxy/provider-button";
 import { ProxyGroups } from "@/components/proxy/proxy-groups";
 import { useVerge } from "@/hooks/use-verge";
+import { useAppData } from "@/providers/app-data-context";
 import {
   getRuntimeProxyChainConfig,
   patchClashMode,
@@ -41,21 +41,11 @@ const ProxyPage = () => {
     null as string | null,
   );
 
+  const { clashConfig, refreshClashConfig } = useAppData();
+
   const updateChainConfigData = useCallback((value: string | null) => {
     dispatchChainConfigData(value);
   }, []);
-
-  const { data: clashConfig, mutate: mutateClash } = useSWR(
-    "getClashConfig",
-    getBaseConfig,
-    {
-      revalidateOnFocus: false,
-      revalidateIfStale: true,
-      dedupingInterval: 1000,
-      errorRetryInterval: 5000,
-    },
-  );
-
   const { verge } = useVerge();
 
   const modeList = useMemo(() => MODES, []);
@@ -69,7 +59,7 @@ const ProxyPage = () => {
       closeAllConnections();
     }
     await patchClashMode(mode);
-    mutateClash();
+    refreshClashConfig();
   });
 
   const onToggleChainMode = useLockFn(async () => {

src/providers/app-data-context.ts

@@ -44,7 +44,7 @@ export const useAppData = () => {
   const context = use(AppDataContext);
 
   if (!context) {
-    throw new Error("useAppData必须在AppDataProvider内使用");
+    throw new Error("useAppData must be used within AppDataProvider");
   }
 
   return context;

src/providers/app-data-provider.tsx

@@ -15,7 +15,7 @@ import {
   getRunningMode,
   getSystemProxy,
 } from "@/services/cmds";
-import { SWR_DEFAULTS, SWR_REALTIME, SWR_SLOW_POLL } from "@/services/config";
+import { SWR_DEFAULTS, SWR_MIHOMO, SWR_REALTIME } from "@/services/config";
 
 import { AppDataContext, AppDataContextType } from "./app-data-context";
 
@@ -43,25 +43,25 @@ export const AppDataProvider = ({
   const { data: clashConfig, mutate: refreshClashConfig } = useSWR(
     "getClashConfig",
     getBaseConfig,
-    SWR_SLOW_POLL,
+    SWR_MIHOMO,
   );
 
   const { data: proxyProviders, mutate: refreshProxyProviders } = useSWR(
     "getProxyProviders",
     calcuProxyProviders,
-    SWR_DEFAULTS,
+    SWR_MIHOMO,
   );
 
   const { data: ruleProviders, mutate: refreshRuleProviders } = useSWR(
     "getRuleProviders",
     getRuleProviders,
-    SWR_DEFAULTS,
+    SWR_MIHOMO,
   );
 
   const { data: rulesData, mutate: refreshRules } = useSWR(
     "getRules",
     getRules,
-    SWR_DEFAULTS,
+    SWR_MIHOMO,
   );
 
   useEffect(() => {

src/services/config.ts

@@ -1,4 +1,12 @@
-import { useSWRConfig } from "swr";
+const SWR_NOT_SMART = {
+  revalidateOnFocus: false,
+  revalidateOnReconnect: false,
+  revalidateIfStale: false,
+  suspense: false,
+  errorRetryCount: 2,
+  dedupingInterval: 1500,
+  errorRetryInterval: 3000,
+} as const;
 
 export const SWR_DEFAULTS = {
   revalidateOnFocus: false,
@@ -19,7 +27,6 @@ export const SWR_SLOW_POLL = {
   refreshInterval: 60000,
 } as const;
 
-export const useSWRMutate = () => {
-  const { mutate } = useSWRConfig();
-  return mutate;
+export const SWR_MIHOMO = {
+  ...SWR_NOT_SMART,
 };