refactor: [GSW-2428] extract query options into constant objects

- Add CacheTime, StaleTime, and RefetchInterval constant objects

Author: tfrg

packages/web/package.json

@@ -42,6 +42,7 @@
     "i18next-http-backend": "^2.5.2",
     "i18next-localstorage-backend": "^4.2.0",
     "jotai": "2.2.1",
+    "ms": "^2.1.3",
     "next": "15.5.2",
     "next-i18next": "^15.3.0",
     "qrcode.react": "^3.1.0",
@@ -79,6 +80,7 @@
     "@types/crypto-js": "^4.2.1",
     "@types/d3": "^7.4.0",
     "@types/jest": "29.4.0",
+    "@types/ms": "^2.1.0",
     "@types/node": "^20.19.0",
     "@types/react": "18.2.5",
     "@types/react-dom": "18.2.5",

packages/web/src/common/values/index.ts

@@ -5,3 +5,4 @@ export * from "./style-constant";
 export * from "./text-constant";
 export * from "./launchpad-constant";
 export * from "./breakpoint.constant";
+export * from "./query-constant";

packages/web/src/common/values/query-constant.ts

@@ -0,0 +1,25 @@
+import ms from "ms";
+
+export const CacheTime = {
+  None: 0,
+  Quick: ms("1m"),
+  Short: ms("2m"),
+  Medium: ms("5m"),
+  Long: ms("10m"),
+  Extended: ms("30m"),
+} as const;
+
+export const StaleTime = {
+  None: 0,
+  Instant: ms("30s"),
+  Fast: ms("1m"),
+  Standard: ms("5m"),
+} as const;
+
+export const RefetchInterval = {
+  None: false,
+  Frequent: ms("5s"),
+  Regular: ms("10s"),
+  Moderate: ms("30s"),
+  Rare: ms("1m"),
+} as const;

packages/web/src/layouts/swap/components/swap-info-chart/swap-token-info/SwapTokenInfo.tsx

@@ -2,6 +2,7 @@ import React from "react";
 
 import { LineGraphData } from "@components/common/line-graph/LineGraph";
 import { isNativeTokenByType, TokenModel } from "@models/token/token-model";
+import { RefetchInterval } from "@common/values";
 
 import useElementWidth from "@hooks/common/use-element-width";
 import { useGetTokenPrices } from "@query/token";
@@ -47,7 +48,10 @@ const SwapTokenInfo = ({ token }: SwapTokenInfoProps) => {
     data: { priceGradeType, last7d = [] } = {},
     isLoading,
     isFetched,
-  } = useGetTokenPrices(tokenData.path as string, { enabled: !!tokenData.path, refetchInterval: 5_000 });
+  } = useGetTokenPrices(tokenData.path as string, {
+    enabled: !!tokenData.path,
+    refetchInterval: RefetchInterval.Frequent,
+  });
 
   const handleMouseMove = React.useCallback(
     (data?: LineGraphData) => {

packages/web/src/layouts/token-detail/containers/token-chart-container/TokenChartContainer.tsx

@@ -18,6 +18,7 @@ import { DEVICE_TYPE } from "@styles/media";
 import { getLabelChartV2, getLocalizeTime, getNumberOfAxis } from "@utils/chart";
 import { checkPositivePrice, generateDateSequence } from "@utils/common";
 import { formatPrice } from "@utils/new-number-utils";
+import { RefetchInterval } from "@common/values";
 
 import TokenChart, { ChartInfo, TokenInfo } from "../../components/token-chart/TokenChart";
 
@@ -140,7 +141,7 @@ const TokenChartContainer: React.FC = () => {
     path === "gnot" ? wugnotPath : path,
     {
       enabled: !!path,
-      refetchInterval: 5_000,
+      refetchInterval: RefetchInterval.Frequent,
     },
   );
 

packages/web/src/react-query/token/use-get-token-prices.ts

@@ -5,6 +5,7 @@ import { useGnoswapContext } from "@hooks/common/use-gnoswap-context";
 import { QUERY_KEY } from "../query-keys";
 import { TokenPriceModel } from "@models/token/token-price-model";
 import { TokenError } from "@common/errors/token";
+import { CacheTime, StaleTime } from "@common/values";
 
 export const useGetTokenPrices = (path: string | null, options?: UseQueryOptions<TokenPriceModel, Error>) => {
   const { tokenRepository } = useGnoswapContext();
@@ -19,8 +20,8 @@ export const useGetTokenPrices = (path: string | null, options?: UseQueryOptions
     },
     refetchOnMount: true,
     refetchOnReconnect: true,
-    cacheTime: 0,
-    staleTime: 0,
+    cacheTime: CacheTime.None,
+    staleTime: StaleTime.None,
     ...options,
   });
 };

yarn.lock

@@ -2544,6 +2544,7 @@ __metadata:
     "@types/crypto-js": "npm:^4.2.1"
     "@types/d3": "npm:^7.4.0"
     "@types/jest": "npm:29.4.0"
+    "@types/ms": "npm:^2.1.0"
     "@types/node": "npm:^20.19.0"
     "@types/react": "npm:18.2.5"
     "@types/react-dom": "npm:18.2.5"
@@ -2571,6 +2572,7 @@ __metadata:
     jest-environment-jsdom: "npm:29.5.0"
     jotai: "npm:2.2.1"
     lint-staged: "npm:13.1.2"
+    ms: "npm:^2.1.3"
     next: "npm:15.5.2"
     next-i18next: "npm:^15.3.0"
     prettier: "npm:3.6.2"
@@ -5244,7 +5246,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/ms@npm:*":
+"@types/ms@npm:*, @types/ms@npm:^2.1.0":
   version: 2.1.0
   resolution: "@types/ms@npm:2.1.0"
   checksum: 10/532d2ebb91937ccc4a89389715e5b47d4c66e708d15942fe6cc25add6dc37b2be058230a327dd50f43f89b8b6d5d52b74685a9e8f70516edfc9bdd6be910eff4