feat(web): Tanstack Query 세팅 및 API 공통 메서드 작성 (#57)

* feat: Tanstack Query 및 api 메서드 정의 * feat: Tanstack Query 및 api 메서드 정의 * chore: 코드리뷰 반영 * chore: 코드리뷰 반영
depromeet · Jul 14, 2024 · defe94d · defe94d
1 parent be3a720
commit defe94d
Show file tree

Hide file tree

Showing 18 changed files with 3,284 additions and 3,773 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -12,7 +12,6 @@
   "editor.codeActionsOnSave": {
     "source.fixAll": "explicit",
     "source.fixAll.eslint": "explicit",
-    "source.organizeImports": "explicit",
     "source.addMissingImports": "explicit"
   }
 }
diff --git a/apps/web/app/layout.tsx b/apps/web/app/layout.tsx
@@ -1,3 +1,4 @@
+import { Providers } from '@sambad/web-domains/commmon';
 import { Inter } from 'next/font/google';
 
 import type { Metadata } from 'next';
@@ -18,7 +19,9 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en">
-      <body className={inter.className}>{children}</body>
+      <body className={inter.className}>
+        <Providers>{children}</Providers>
+      </body>
     </html>
   );
 }
diff --git a/apps/web/app/page.tsx b/apps/web/app/page.tsx
@@ -1,18 +1,3 @@
-'use client';
-
 import { FirstDomainExampleScreen } from '@sambad/web-domains/first-domain';
-import { useEffect } from 'react';
-
-import styles from './page.module.css';
-
-export default function Home() {
-  useEffect(() => {
-    console.log('test-main');
-  }, []);
 
-  return (
-    <main className={styles.main}>
-      <FirstDomainExampleScreen />
-    </main>
-  );
-}
+export default FirstDomainExampleScreen;
diff --git a/apps/web/next.config.mjs b/apps/web/next.config.mjs
@@ -1,5 +1,13 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
+  async rewrites() {
+    return [
+      {
+        source: '/api/:path*',
+        destination: 'http://ec2-43-203-195-123.ap-northeast-2.compute.amazonaws.com:8080/:path*', // Proxy to Backend
+      },
+    ];
+  },
   compiler: {
     emotion: true,
   },

diff --git a/packages/core/eslint-config/base.js b/packages/core/eslint-config/base.js
@@ -37,9 +37,10 @@ module.exports = {
       },
     ],
     'no-duplicate-imports': 'error',
-    'no-unused-vars': ['error', { varsIgnorePattern: '^_', argsIgnorePattern: '^_' }],
+    'no-unused-vars': 'off',
+    '@typescript-eslint/no-unused-vars': 'error',
     'react/jsx-curly-brace-presence': ['error', { props: 'never', children: 'never' }],
-    '@typescript-eslint/consistent-type-imports': 'error',
+
     'react/no-unknown-property': ['error', { ignore: ['css'] }],
   },
   overrides: [{ files: ['*.js?(x)', '*.ts?(x)'] }],

diff --git a/packages/core/eslint-config/package.json b/packages/core/eslint-config/package.json
@@ -10,6 +10,7 @@
   "devDependencies": {
     "@typescript-eslint/eslint-plugin": "^7.1.0",
     "@typescript-eslint/parser": "^7.1.0",
+    "@tanstack/eslint-plugin-query": "^5.50.1",
     "@vercel/style-guide": "^5.2.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-config-turbo": "^2.0.0",

diff --git a/packages/core/eslint-config/react-internal.js b/packages/core/eslint-config/react-internal.js
@@ -3,7 +3,13 @@ const base_eslint_config = require('./base.js');
 /** @type {import("eslint").Linter.Config} */
 module.exports = {
   ...base_eslint_config,
-  extends: ['eslint:recommended', 'plugin:react/recommended', 'prettier', 'turbo'],
+  extends: [
+    'eslint:recommended',
+    'plugin:react/recommended',
+    'plugin:@tanstack/eslint-plugin-query/recommended',
+    'prettier',
+    'turbo',
+  ],
   env: {
     browser: true,
   },

diff --git a/packages/web-domains/package.json b/packages/web-domains/package.json
@@ -4,13 +4,17 @@
   "private": true,
   "exports": {
     "./first-domain": "./src/first-domain/index.ts",
-    "./second-domain": "./src/second-domain/index.ts"
+    "./second-domain": "./src/second-domain/index.ts",
+    "./commmon": "./src/common/index.ts"
   },
   "scripts": {
     "lint": "eslint . --max-warnings 0",
     "type-check": "tsc --noEmit"
   },
-  "dependencies": {},
+  "dependencies": {
+    "@tanstack/react-query": "^5.50.1",
+    "axios": "^1.7.2"
+  },
   "devDependencies": {
     "@sambad/sds": "workspace:*",
     "@sambad/eslint-config": "workspace:*",
@@ -19,6 +23,7 @@
     "@types/eslint": "^8.56.5",
     "@types/react": "^18.2.61",
     "@types/react-dom": "^18.2.19",
+    "@types/qs": "^6.9.15",
     "eslint": "^8.57.0",
     "react": "^18",
     "typescript": "^5.3.3"

diff --git a/packages/web-domains/src/common/.gitkeep b/packages/web-domains/src/common/.gitkeep
diff --git a/packages/web-domains/src/common/apis/base.api.ts b/packages/web-domains/src/common/apis/base.api.ts
@@ -0,0 +1,28 @@
+import axios from 'axios';
+const baseURL = `/api`;
+
+const axiosInstance = axios.create({
+  baseURL: baseURL,
+});
+
+export class Http {
+  static async GET<Response = unknown>(...args: Parameters<typeof axiosInstance.get>) {
+    const response = await axiosInstance.get<Response>(...args);
+    return response.data;
+  }
+
+  static async POST<Request = unknown, Response = unknown>(...args: Parameters<typeof axiosInstance.post>) {
+    const response = await axiosInstance.post<Request, Response>(...args);
+    return response;
+  }
+
+  static async PUT<Request = unknown, Response = unknown>(...args: Parameters<typeof axiosInstance.put>) {
+    const response = await axiosInstance.put<Request, Response>(...args);
+    return response;
+  }
+
+  static async DELETE<Response = unknown>(...args: Parameters<typeof axiosInstance.delete>) {
+    const response = await axiosInstance.delete<Response>(...args);
+    return response.data;
+  }
+}
diff --git a/packages/web-domains/src/common/apis/queries/useHealthCheckQuery.ts b/packages/web-domains/src/common/apis/queries/useHealthCheckQuery.ts
@@ -0,0 +1,28 @@
+import { QueryClient, useQuery } from '@tanstack/react-query';
+
+import { Http } from '../base.api';
+
+const ping = () => Http.GET<any>('/actuator/health');
+
+export const useHealthCheckQuery = () => {
+  const { data } = useQuery({
+    queryKey: ['health'],
+    queryFn: ping,
+  });
+
+  return { data };
+};
+
+export const useHealthCheckPrefetchQuery = async () => {
+  const queryClient = new QueryClient();
+
+  const prefetchedData = await queryClient.prefetchQuery({
+    queryKey: ['health'],
+    queryFn: ping,
+  });
+
+  return {
+    queryClient,
+    prefetchedData,
+  };
+};
diff --git a/packages/web-domains/src/common/contexts/Providers.tsx b/packages/web-domains/src/common/contexts/Providers.tsx
@@ -0,0 +1,9 @@
+'use client';
+
+import { PropsWithChildren } from 'react';
+
+import { QueryClientProvider } from './QueryClientProvider';
+
+export const Providers = ({ children }: PropsWithChildren) => {
+  return <QueryClientProvider>{children}</QueryClientProvider>;
+};
diff --git a/packages/web-domains/src/common/contexts/QueryClientProvider.tsx b/packages/web-domains/src/common/contexts/QueryClientProvider.tsx
@@ -0,0 +1,34 @@
+'use client';
+import { isServer, QueryClient, QueryClientProvider as TanstackProvider } from '@tanstack/react-query';
+import { PropsWithChildren } from 'react';
+
+const makeQueryClient = () => {
+  return new QueryClient({
+    defaultOptions: {
+      queries: {
+        staleTime: 60 * 1000,
+        refetchOnWindowFocus: false,
+        retry: 1,
+      },
+    },
+  });
+};
+
+let browserQueryClient: QueryClient | undefined = undefined;
+
+const getQueryClient = () => {
+  if (isServer) {
+    return makeQueryClient();
+  }
+
+  if (!browserQueryClient) {
+    browserQueryClient = makeQueryClient();
+  }
+  return browserQueryClient;
+};
+
+export const QueryClientProvider = ({ children }: PropsWithChildren) => {
+  const queryClient = getQueryClient();
+
+  return <TanstackProvider client={queryClient}>{children}</TanstackProvider>;
+};
diff --git a/packages/web-domains/src/common/index.ts b/packages/web-domains/src/common/index.ts
@@ -0,0 +1,2 @@
+export { QueryClientProvider } from './contexts/QueryClientProvider';
+export { Providers } from './contexts/Providers';
diff --git a/...b-domains/src/first-domain/features/containers/FirstFeatureOfFirstDomainTestContainer.tsx b/...b-domains/src/first-domain/features/containers/FirstFeatureOfFirstDomainTestContainer.tsx
@@ -5,7 +5,7 @@ import { FirstFeatureOfFirstDomainTestButton } from '../components/FirstFeatureO
 import { useFirstFeatureOfFirstDomainService } from '../services/useFirstFeatureOfFirstDomainTestService';
 
 export const FirstFeatureOfFirstDomainTestContainer = () => {
-  const { displayText, handleChangeDisplayText } = useFirstFeatureOfFirstDomainService();
+  const { displayText, handleChangeDisplayText, data } = useFirstFeatureOfFirstDomainService();
 
   return (
     <FirstFeatureOfFirstDomainBox displayText={displayText} onClick={handleChangeDisplayText}>
@@ -14,6 +14,7 @@ export const FirstFeatureOfFirstDomainTestContainer = () => {
           alert('Button is Clicked at Container');
         }}
       />
+      <div css={{ width: '200px', height: '200px', backgroundColor: 'red' }}>{data}</div>
     </FirstFeatureOfFirstDomainBox>
   );
 };
diff --git a/...web-domains/src/first-domain/features/services/useFirstFeatureOfFirstDomainTestService.ts b/...web-domains/src/first-domain/features/services/useFirstFeatureOfFirstDomainTestService.ts
@@ -1,13 +1,18 @@
 import { useState } from 'react';
 
+import { useHealthCheckQuery } from '../../../common/apis/queries/useHealthCheckQuery';
+
 export const useFirstFeatureOfFirstDomainService = () => {
   const [displayText, setDisplayText] = useState<string>('');
 
+  const { data } = useHealthCheckQuery();
+
   const handleChangeDisplayText = () => {
     setDisplayText('Test Container Button Clicked');
   };
 
   return {
+    data,
     displayText,
     handleChangeDisplayText,
   };

diff --git a/packages/web-domains/src/first-domain/screens/FirstDomainExampleScreen.tsx b/packages/web-domains/src/first-domain/screens/FirstDomainExampleScreen.tsx
@@ -1,10 +1,16 @@
+import { HydrationBoundary, dehydrate } from '@tanstack/react-query';
+
+import { useHealthCheckPrefetchQuery } from '../../common/apis/queries/useHealthCheckQuery';
 import { FirstFeatureOfFirstDomainTestContainer } from '../features/containers/FirstFeatureOfFirstDomainTestContainer';
 
-export const FirstDomainExampleScreen = () => {
+export const FirstDomainExampleScreen = async () => {
+  const { queryClient } = await useHealthCheckPrefetchQuery();
   return (
-    <div>
-      <h1>도메인 화면을 전체 담당 하는 컴포넌트입니다.</h1>
-      <FirstFeatureOfFirstDomainTestContainer />
-    </div>
+    <HydrationBoundary state={dehydrate(queryClient)}>
+      <div>
+        <h1>도메인 화면을 전체 담당 하는 컴포넌트입니다.</h1>
+        <FirstFeatureOfFirstDomainTestContainer />
+      </div>
+    </HydrationBoundary>
   );
 };
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		export { QueryClientProvider } from './contexts/QueryClientProvider';
		export { Providers } from './contexts/Providers';