feat: use tanstack query

Author: xiejay97

package.json

@@ -14,16 +14,16 @@
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
-    "@laser-pro/acl": "^1.1.0",
-    "@laser-pro/auth": "^1.1.0",
-    "@laser-pro/http": "^1.1.0",
-    "@laser-pro/router": "^1.1.0",
-    "@laser-pro/storage": "^1.1.0",
+    "@laser-pro/acl": "^2.0.0",
+    "@laser-pro/auth": "^2.0.0",
+    "@laser-pro/router": "^2.0.0",
+    "@laser-pro/storage": "^2.0.0",
     "@laser-ui/components": "^2.0.4",
     "@laser-ui/hooks": "^2.0.4",
     "@laser-ui/themes": "^2.0.4",
     "@laser-ui/utils": "^2.0.4",
     "@material-design-icons/svg": "^0.14.13",
+    "@tanstack/react-query": "^5.90.2",
     "axios": "^1.7.9",
     "dayjs": "^1.11.13",
     "echarts": "^5.6.0",

pnpm-lock.yaml

@@ -8,6 +8,17 @@ interface StandardFields {
 
 declare global {
   declare namespace AppDocs {
+    export interface UploadFile extends StandardFields {
+      name: string;
+      path: string;
+    }
+
+    export interface User extends StandardFields {
+      name: string;
+      avatar?: AppDocs.UploadFile | null;
+      permissions: (string | number)[];
+    }
+
     export interface DeviceModel extends StandardFields {
       name: string;
       disabled: boolean;

src/@types/global.d.ts

@@ -3,11 +3,14 @@ import type { LContextIn } from '@laser-ui/components/context';
 import { useStorage } from '@laser-pro/storage';
 import { ConfigProvider, Root } from '@laser-ui/components';
 import { useIsomorphicLayoutEffect } from '@laser-ui/hooks';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { useMemo } from 'react';
 
 import { STORAGE } from './configs/storage';
 import AppRouter from './routes/Router';
 
+const queryClient = new QueryClient();
+
 function App() {
   const languageStorage = useStorage(...STORAGE.language);
   const themeStorage = useStorage(...STORAGE.theme);
@@ -38,11 +41,13 @@ function App() {
   const rootContext = useMemo(() => ({ i18n: { lang: languageStorage.value } }), [languageStorage.value]);
 
   return (
-    <ConfigProvider context={lContext}>
-      <Root context={rootContext}>
-        <AppRouter />
-      </Root>
-    </ConfigProvider>
+    <QueryClientProvider client={queryClient}>
+      <ConfigProvider context={lContext}>
+        <Root context={rootContext}>
+          <AppRouter />
+        </Root>
+      </ConfigProvider>
+    </QueryClientProvider>
   );
 }
 

src/app/App.tsx

@@ -1,4 +1,4 @@
-import type { HttpConfigs } from '@laser-pro/http/configs';
+import type { HttpConfigs } from '../core/axios/configs';
 
 import mock from '../mock';
 

src/app/configs/http.ts

@@ -0,0 +1,38 @@
+import type { HttpRequestConfigOverrides } from './types';
+import type { AxiosRequestConfig, AxiosResponse } from 'axios';
+
+import _axios from 'axios';
+
+import { config, CONFIGS } from './configs';
+
+export function axios<T = any, D = any>(
+  config: AxiosRequestConfig,
+  overrides?: true | HttpRequestConfigOverrides,
+): Promise<AxiosResponse<T, D>> {
+  const axios = CONFIGS.mock ? CONFIGS.mock : _axios;
+
+  if (overrides === true) {
+    return axios(config);
+  }
+
+  const token = CONFIGS.token;
+
+  let headers = config.headers;
+  if (!overrides?.authorization) {
+    if (token) {
+      headers = Object.assign({}, config.headers);
+      headers.Authorization = `Bearer ${token.value}`;
+    }
+  }
+
+  return axios({
+    ...config,
+    baseURL: overrides?.baseURL ? config.baseURL : CONFIGS.baseURL,
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    url: overrides?.url ? config.url : CONFIGS.transformURL(config.url!),
+    headers,
+  });
+}
+
+axios.config = config;
+axios.configs = CONFIGS;

src/app/core/axios/axios.ts

@@ -0,0 +1,21 @@
+import type { Token } from '@laser-pro/auth';
+import type { AxiosRequestConfig, AxiosResponse } from 'axios';
+
+export interface HttpConfigs {
+  mock?: (config: AxiosRequestConfig) => Promise<AxiosResponse>;
+  baseURL?: string;
+  transformURL: (url: string) => string;
+  token?: Token;
+}
+
+export const CONFIGS: HttpConfigs = {
+  transformURL: (url: string) => {
+    return url;
+  },
+};
+
+export function config(configs: Partial<HttpConfigs>) {
+  Object.keys(configs).forEach((key) => {
+    (CONFIGS as any)[key] = (configs as any)[key];
+  });
+}

src/app/core/axios/configs.ts

@@ -0,0 +1,2 @@
+export { axios } from './axios';
+export { useAxios } from './useAxios';

src/app/core/axios/index.ts

@@ -0,0 +1,7 @@
+export {};
+
+export interface HttpRequestConfigOverrides {
+  baseURL?: boolean;
+  url?: boolean;
+  authorization?: boolean;
+}

src/app/core/axios/types.ts

@@ -0,0 +1,48 @@
+import type { HttpRequestConfigOverrides } from './types';
+import type { AxiosRequestConfig } from 'axios';
+
+import { DialogService, Toast } from '@laser-ui/components';
+import { useTranslation } from 'react-i18next';
+import { useLocation, useNavigate } from 'react-router';
+
+import { axios } from './axios';
+import { LOGIN_PATH, PREV_ROUTE_KEY } from '../../configs/router';
+
+export function useAxios() {
+  const location = useLocation();
+  const navigate = useNavigate();
+  const { t } = useTranslation();
+
+  return <T = any>(config: AxiosRequestConfig, overrides?: true | HttpRequestConfigOverrides): Promise<T> => {
+    return axios(config, overrides)
+      .then((res) => res.data)
+      .catch((error) => {
+        if (error.response) {
+          switch (error.response.status) {
+            case 401:
+              DialogService.open(Toast, {
+                children: t('User not authorized'),
+                type: 'error',
+              });
+              navigate(LOGIN_PATH, { state: { [PREV_ROUTE_KEY]: location } });
+              break;
+
+            case 403:
+            case 404:
+            case 500:
+              if (location.pathname !== LOGIN_PATH) {
+                navigate(`/exception/${error.response.status}`);
+              }
+              break;
+
+            default:
+              break;
+          }
+        } else if (error.request) {
+          // The request was made but no response was received.
+        } else {
+          // Something happened in setting up the request that triggered an Error.
+        }
+      });
+  };
+}