Setting(project): axios, tanstack query 세팅 (#65)

* fix: 충돌 해결

* setting: getQueryClient에서 ssr 분기 처리 제거

Author: constantly-dev

apps/client/package.json

@@ -10,6 +10,8 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@tanstack/react-query": "^5.85.3",
+    "axios": "^1.11.0",
     "class-variance-authority": "^0.7.1",
     "react": "^19.1.1",
     "react-dom": "^19.1.1",

apps/client/src/shared/apis/.gitkeep

@@ -0,0 +1,10 @@
+import axios from 'axios';
+
+const apiRequest = axios.create({
+  baseURL: import.meta.env.VITE_BASE_URL,
+  headers: {
+    'Content-Type': 'application/json',
+  },
+});
+
+export default apiRequest;

apps/client/src/shared/apis/axiosInstance.ts

@@ -0,0 +1,15 @@
+import { QueryClient } from "@tanstack/react-query";
+import queryClientOptions from "./queryClientOptions";
+
+const makeQueryClient = () => {
+  return new QueryClient(queryClientOptions);
+};
+
+let browserQueryClient: QueryClient | undefined;
+
+const getQueryClient = () => {
+  if (!browserQueryClient) browserQueryClient = makeQueryClient();
+  return browserQueryClient;
+};
+
+export default getQueryClient;

apps/client/src/shared/apis/query/getQueryClient.ts

@@ -0,0 +1,12 @@
+const queryClientOptions = {
+  defaultOptions: {
+    queries: {
+      staleTime: 1000 * 60 * 5,
+      retry: 1,
+      refetchOnMount: false,
+      refetchOnWindowFocus: false,
+    },
+  },
+};
+
+export default queryClientOptions;

apps/client/src/shared/apis/query/queryClientOptions.ts

@@ -11,18 +11,19 @@
     "zip": "vite build && node scripts/zip.mjs"
   },
   "dependencies": {
-    "@tanstack/react-query": "^5.85.3",
+    "@tanstack/react-query": "^5.85.5",
+    "axios": "^1.11.0",
     "react": "^19.1.1",
     "react-dom": "^19.1.1"
   },
   "devDependencies": {
-    "@pivanov/vite-plugin-svg-sprite": "^3.1.3",
     "@crxjs/vite-plugin": "^2.2.0",
     "@eslint/js": "^9.33.0",
     "@pinback/design-system": "workspace:*",
     "@pinback/eslint-config": "workspace:*",
     "@pinback/tailwind-config": "workspace:*",
     "@pinback/typescript-config": "workspace:*",
+    "@pivanov/vite-plugin-svg-sprite": "^3.1.3",
     "@tailwindcss/vite": "^4.1.12",
     "@types/chrome": "^0.0.273",
     "@types/react": "^18.3.5",

apps/extension/package.json

@@ -0,0 +1,10 @@
+import axios from 'axios';
+
+const apiRequest = axios.create({
+  baseURL: import.meta.env.VITE_BASE_URL,
+  headers: {
+    'Content-Type': 'application/json',
+  },
+});
+
+export default apiRequest;

apps/extension/src/apis/axiosInstance.ts

@@ -0,0 +1,15 @@
+import { QueryClient } from "@tanstack/react-query";
+import queryClientOptions from "./queryClientOptions";
+
+const makeQueryClient = () => {
+  return new QueryClient(queryClientOptions);
+};
+
+let browserQueryClient: QueryClient | undefined;
+
+const getQueryClient = () => {
+  if (!browserQueryClient) browserQueryClient = makeQueryClient();
+  return browserQueryClient;
+};
+
+export default getQueryClient;

apps/extension/src/apis/query/getQueryClient.ts

@@ -0,0 +1,12 @@
+const queryClientOptions = {
+  defaultOptions: {
+    queries: {
+      staleTime: 1000 * 60 * 5,
+      retry: 1,
+      refetchOnMount: false,
+      refetchOnWindowFocus: false,
+    },
+  },
+};
+
+export default queryClientOptions;