Merge pull request dnd-side-project#102 from dnd-side-project/feat/dnd-side-project#101

[FEAT] query-key-factory 적용

Author: ujinsim

package.json

@@ -12,7 +12,9 @@
     "prepare": "husky install"
   },
   "dependencies": {
+    "@lukemorales/query-key-factory": "^1.3.4",
     "@tanstack/react-query": "^5.84.0",
+    "@tanstack/react-query-devtools": "^5.87.4",
     "aos": "^2.3.4",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",

src/app/layout.tsx

@@ -2,6 +2,7 @@ import type { Metadata } from 'next';
 import './globals.css';
 import { QueryProvider } from '@/components/providers/query-provider';
 import { HouseMemoProvider } from '@/components/providers/house-memo-provider';
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import { Toaster } from 'react-hot-toast';
 import IcoLogoAll from '@assets/ico-logo-all.svg';
 import IcoHouse from '@assets/login/lco-house.svg';
@@ -68,6 +69,7 @@ export default function RootLayout({
 
             {children}
             <Toaster position="top-center" reverseOrder={false} />
+            {process.env.NODE_ENV === 'development' && <ReactQueryDevtools initialIsOpen={false} />}
           </QueryProvider>
         </HouseMemoProvider>
       </body>

src/queries/checkList/index.ts

@@ -0,0 +1,11 @@
+import { createQueryKeys } from '@lukemorales/query-key-factory';
+import { getChecklistInfo } from '@/services/checkList';
+import type { ChecklistResponse } from '@/types/checklist';
+
+export const checklist = createQueryKeys('checklist', {
+  all: null,
+  info: {
+    queryKey: null,
+    queryFn: (): Promise<ChecklistResponse> => getChecklistInfo(),
+  },
+});

src/queries/checkList/useChecklistInfo.ts

@@ -1,10 +1,6 @@
 import { useQuery } from '@tanstack/react-query';
-import { getChecklistInfo } from '@/services/checkList';
-import { ChecklistResponse } from '@/types/checklist';
+import { queries } from '@/queries';
 
 export const useChecklistInfo = () => {
-  return useQuery<ChecklistResponse>({
-    queryKey: ['checklist'],
-    queryFn: getChecklistInfo,
-  });
+  return useQuery(queries.checklist.info);
 };

src/queries/checkList/useSendRequiredItems.ts

@@ -2,16 +2,18 @@ import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { sendRequiredItems } from '@/services/checkList';
 import toast from 'react-hot-toast';
 import { TOAST_STYLES } from '@/utils/toastStyles';
+import { queries } from '@/queries';
 
 export function useSendRequiredItems() {
-  const queryClient = useQueryClient();
+  const qc = useQueryClient();
 
   return useMutation({
     mutationFn: sendRequiredItems,
     onSuccess: () => {
       toast.success('필수 항목이 저장되었습니다.', TOAST_STYLES.success);
-      queryClient.invalidateQueries({
-        queryKey: ['checklist'],
+
+      qc.invalidateQueries({
+        queryKey: queries.checklist.info.queryKey,
       });
     },
     onError: (error) => {

src/queries/index.ts

@@ -0,0 +1,6 @@
+import { mergeQueryKeys } from '@lukemorales/query-key-factory';
+import { checklist } from './checkList';
+
+export const queries = mergeQueryKeys(checklist);
+// 필요 시 여기에 다른 feature keys도 추가: mergeQueryKeys(checklist, users, todos, ...)
+export type QueryKeys = typeof queries;

yarn.lock

@@ -1357,6 +1357,11 @@
     "@jridgewell/resolve-uri" "^3.1.0"
     "@jridgewell/sourcemap-codec" "^1.4.14"
 
+"@lukemorales/query-key-factory@^1.3.4":
+  version "1.3.4"
+  resolved "https://registry.yarnpkg.com/@lukemorales/query-key-factory/-/query-key-factory-1.3.4.tgz#d14001dbd781b024df93ca73bd785db590924486"
+  integrity sha512-A3frRDdkmaNNQi6mxIshsDk4chRXWoXa05US8fBo4kci/H+lVmujS6QrwQLLGIkNIRFGjMqp2uKjC4XsLdydRw==
+
 "@mdx-js/react@^3.0.0":
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/@mdx-js/react/-/react-3.1.0.tgz#c4522e335b3897b9a845db1dbdd2f966ae8fb0ed"
@@ -1873,6 +1878,18 @@
   resolved "https://registry.yarnpkg.com/@tanstack/query-core/-/query-core-5.85.5.tgz#c4adc126bb3a927e4d60280bf3cf62210700147c"
   integrity sha512-KO0WTob4JEApv69iYp1eGvfMSUkgw//IpMnq+//cORBzXf0smyRwPLrUvEe5qtAEGjwZTXrjxg+oJNP/C00t6w==
 
+"@tanstack/query-devtools@5.87.3":
+  version "5.87.3"
+  resolved "https://registry.yarnpkg.com/@tanstack/query-devtools/-/query-devtools-5.87.3.tgz#0cfff30823f837d6b9ead08f8d1b16459203fdb2"
+  integrity sha512-LkzxzSr2HS1ALHTgDmJH5eGAVsSQiuwz//VhFW5OqNk0OQ+Fsqba0Tsf+NzWRtXYvpgUqwQr4b2zdFZwxHcGvg==
+
+"@tanstack/react-query-devtools@^5.87.4":
+  version "5.87.4"
+  resolved "https://registry.yarnpkg.com/@tanstack/react-query-devtools/-/react-query-devtools-5.87.4.tgz#278fe66c5263eff82178ad38f117a8c29d726714"
+  integrity sha512-JYcnVJBBW1DCPyNGM0S2CyrLpe6KFiL2gpYd/k9tAp62Du7+Y27zkzd+dKFyxpFadYaTxsx4kUA7YvnkMLVUoQ==
+  dependencies:
+    "@tanstack/query-devtools" "5.87.3"
+
 "@tanstack/react-query@^5.84.0":
   version "5.85.5"
   resolved "https://registry.yarnpkg.com/@tanstack/react-query/-/react-query-5.85.5.tgz#50a1c02b50a59f93eba8f0d91d54d39c6c534c5e"