feat: skip tunnel API requests when server version < 0.5.19

src/routes/onboarding/index.tsx

@@ -13,6 +13,11 @@ import WelcomePage from "./steps/welcome-page";
 import WhoCanSignUp from "./steps/who-can-sign-up";
 import SelectLanguage from "../../components/Language";
 import { useGetAutoTunnelInfoQuery } from "@/app/services/server";
+import { useAppSelector } from "@/app/store";
+import { compareVersion } from "@/utils";
+import { shallowEqual } from "react-redux";
+
+const TUNNEL_MIN_VERSION = "0.5.19";
 
 const Navigator = ({ showTunnelStep }: { showTunnelStep: boolean }) => {
   const { activeStep, goToStep } = useWizard();
@@ -54,8 +59,10 @@ const Navigator = ({ showTunnelStep }: { showTunnelStep: boolean }) => {
 export default function OnboardingPage() {
   const { t } = useTranslation("welcome");
   const [serverName, setServerName] = useState("");
-  const { data: autoInfo } = useGetAutoTunnelInfoQuery();
+  const currentVersion = useAppSelector((store) => store.server.version, shallowEqual);
-  const showTunnelStep = autoInfo ? !autoInfo.auto_cftunnel : false;
+  const versionOk = !!currentVersion && compareVersion(currentVersion, TUNNEL_MIN_VERSION) >= 0;
+  const { data: autoInfo } = useGetAutoTunnelInfoQuery(undefined, { skip: !versionOk });
+  const showTunnelStep = versionOk && (autoInfo ? !autoInfo.auto_cftunnel : false);
 
   return (
     <>

src/routes/onboarding/steps/done-page.tsx

@@ -1,14 +1,21 @@
 import { Trans, useTranslation } from "react-i18next";
 import { useNavigate } from "react-router-dom";
+import { shallowEqual } from "react-redux";
 
 import StyledButton from "@/components/styled/Button";
 import PlayIcon from "@/assets/icons/play.svg?url";
 import { useGetAutoTunnelInfoQuery } from "@/app/services/server";
+import { useAppSelector } from "@/app/store";
+import { compareVersion } from "@/utils";
+
+const TUNNEL_MIN_VERSION = "0.5.19";
 
 export default function DonePage({ serverName }: { serverName: string }) {
   const { t } = useTranslation("welcome", { keyPrefix: "onboarding" });
   const navigate = useNavigate();
-  const { data: autoInfo } = useGetAutoTunnelInfoQuery();
+  const currentVersion = useAppSelector((store) => store.server.version, shallowEqual);
+  const versionOk = !!currentVersion && compareVersion(currentVersion, TUNNEL_MIN_VERSION) >= 0;
+  const { data: autoInfo } = useGetAutoTunnelInfoQuery(undefined, { skip: !versionOk });
 
   const tunnelUrl =
     autoInfo?.tunnel_status.status === "running" ? autoInfo.tunnel_status.url : null;

src/routes/setting/Cloudflared/index.tsx

@@ -1,12 +1,16 @@
 import { useEffect, useRef, useState } from "react";
 import toast from "react-hot-toast";
 import { useTranslation } from "react-i18next";
+import { shallowEqual } from "react-redux";
 
 import { BASE_ORIGIN, tokenHeader } from "@/app/config";
 import { useLazyGetCloudflaredStatusQuery, useStopCloudflaredMutation } from "@/app/services/server";
 import ServerVersionChecker from "@/components/ServerVersionChecker";
 import Button from "@/components/styled/Button";
-import { getLocalAuthData } from "@/utils";
+import { getLocalAuthData, compareVersion } from "@/utils";
+import { useAppSelector } from "@/app/store";
+
+const TUNNEL_MIN_VERSION = "0.5.19";
 
 type TunnelStatus = "idle" | "downloading" | "starting" | "running" | "error";
 
@@ -19,6 +23,8 @@ interface SseEvent {
 
 export default function Cloudflared() {
   const { t } = useTranslation("setting", { keyPrefix: "cloudflared" });
+  const currentVersion = useAppSelector((store) => store.server.version, shallowEqual);
+  const versionOk = !!currentVersion && compareVersion(currentVersion, TUNNEL_MIN_VERSION) >= 0;
   const [status, setStatus] = useState<TunnelStatus>("idle");
   const [tunnelUrl, setTunnelUrl] = useState<string | null>(null);
   const [errorMsg, setErrorMsg] = useState<string | null>(null);
@@ -31,6 +37,7 @@ export default function Cloudflared() {
   const [stopCloudflared, { isLoading: isStopping }] = useStopCloudflaredMutation();
 
   useEffect(() => {
+    if (!versionOk) return;
     getStatus().then((res) => {
       if (res.data) {
         setStatus(res.data.status);
@@ -38,7 +45,7 @@ export default function Cloudflared() {
         setErrorMsg(res.data.error);
       }
     });
-  }, []);
+  }, [versionOk]);
 
   const addLog = (msg: string) =>
     setLogs((prev) => [...prev.slice(-29), msg]);