fix: queryClient.resetQueries after mutation success

DDD-Community · Feb 29, 2024 · cd71368 · cd71368
1 parent 1862efa
commit cd71368
Show file tree

Hide file tree

Showing 7 changed files with 33 additions and 6 deletions.
diff --git a/package.json b/package.json
@@ -25,6 +25,7 @@
     "@emotion/react": "^11.11.3",
     "@emotion/styled": "^11.11.0",
     "@tanstack/react-query": "^5.18.1",
+    "@tanstack/react-query-devtools": "^5.24.1",
     "@typescript-eslint/parser": "^6.19.0",
     "axios": "^1.6.5",
     "dayjs": "^1.11.10",

diff --git a/src/components/organisms/FridgeBoard.tsx b/src/components/organisms/FridgeBoard.tsx
@@ -69,6 +69,7 @@ const FridgeBoard: React.FC<{ currentFridgeInfo: CurrentFridgeInfoType }> = ({ c
           >
             <ModalBody padding={0}>
               <IngredientModal
+                currentFridgeInfo={currentFridgeInfo}
                 isDetailModal
                 id={detailIngredientId}
                 ingredientsRefetch={ingredientsRefetch}

diff --git a/src/components/organisms/IngredientModal.tsx b/src/components/organisms/IngredientModal.tsx
@@ -9,6 +9,7 @@ import {
   usePostIngredient,
 } from '@/hooks/queries/fridge';
 
+import type { CurrentFridgeInfoType } from '@/types/fridge';
 import Image from 'next/image';
 import ModalContainer from '../atoms/ModalContainer';
 import type { PostIngredientBodyType } from '@/hooks/queries/fridge/usePostIngredient';
@@ -25,7 +26,16 @@ const IngredientModal: React.FC<{
   categoryImage?: string;
   category?: string;
   toggleIsOpenIngredientModal: () => void;
-}> = ({ id, categoryImage, toggleIsOpenIngredientModal, isDetailModal = false, category, ingredientsRefetch }) => {
+  currentFridgeInfo?: CurrentFridgeInfoType;
+}> = ({
+  id,
+  categoryImage,
+  currentFridgeInfo,
+  toggleIsOpenIngredientModal,
+  isDetailModal = false,
+  category,
+  ingredientsRefetch,
+}) => {
   const router = useRouter();
   const today = new Date();
 
@@ -60,11 +70,11 @@ const IngredientModal: React.FC<{
     isDeleted: false,
   });
 
-  const deleteIngredient = useDeleteIngredientById(id, Number(fridgeid), reqBody?.location, () => {
+  const deleteIngredient = useDeleteIngredientById(id, currentFridgeInfo?.fridgeId as number, reqBody?.location, () => {
     ingredientsRefetch();
     toggleIsOpenIngredientModal();
   });
-  const putIngredient = usePutIngredientById(id, Number(fridgeid), reqBody?.location, () => {
+  const putIngredient = usePutIngredientById(id, currentFridgeInfo?.fridgeId as number, reqBody?.location, () => {
     ingredientsRefetch();
     toggleIsOpenIngredientModal();
   });

diff --git a/src/hooks/queries/fridge/useDeleteIngredientById.ts b/src/hooks/queries/fridge/useDeleteIngredientById.ts
@@ -5,7 +5,7 @@ import { useBaseMutation } from '../useBaseMutation';
 const useDeleteIngredientById = (id: number, fridgeId: number, location: string, fn?: () => void) => {
   const onSuccess = () => {
     if (fn) fn();
-    void queryClient.invalidateQueries();
+    void queryClient.resetQueries({ queryKey: queryKeys.MY_FRIDGE_CONTENT(fridgeId, location), exact: true });
   };
   return useBaseMutation(queryKeys.MY_FRIDGE_CONTENT(fridgeId, location), `/ingrs/detail/${id}`, onSuccess, 'DELETE');
 };

diff --git a/src/hooks/queries/fridge/usePutIngredientById.ts b/src/hooks/queries/fridge/usePutIngredientById.ts
@@ -16,10 +16,10 @@ export interface FridgeBodyType {
 const usePutIngredientById = (id: number, fridgeId: number, location: string, fn?: () => void) => {
   const onSuccess = () => {
     if (fn) fn();
-    void queryClient.invalidateQueries();
+    void queryClient.resetQueries({ queryKey: queryKeys.MY_FRIDGE_CONTENT(fridgeId, location), exact: true });
   };
   return useBaseMutation<FridgeBodyType>(
-    [...queryKeys.MY_FRIDGE_CONTENT(fridgeId, location), ...queryKeys.MY_INGREDIENT_ID(id)],
+    queryKeys.MY_FRIDGE_CONTENT(fridgeId, location),
     `/ingrs/detail/${id}`,
     onSuccess,
     'PUT',

diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
@@ -12,6 +12,8 @@ import React from 'react';
 import { RecoilRoot } from 'recoil';
 import dayjs from 'dayjs';
 
+// import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
+
 dayjs.locale('ko');
 
 const theme = extendTheme({
@@ -50,6 +52,7 @@ export default function App({ Component, pageProps }: AppProps): JSX.Element {
           </ErrorBoundary>
         )}
       </QueryErrorResetBoundary>
+      {/* <ReactQueryDevtools initialIsOpen={false} /> */}
     </QueryClientProvider>
   );
 }
diff --git a/yarn.lock b/yarn.lock
@@ -3971,6 +3971,18 @@
   resolved "https://registry.yarnpkg.com/@tanstack/query-core/-/query-core-5.18.1.tgz#b653ee354b7f4712d53565ccc5c6d8fb83ec866c"
   integrity sha512-fYhrG7bHgSNbnkIJF2R4VUXb4lF7EBiQjKkDc5wOlB7usdQOIN4LxxHpDxyE3qjqIst1WBGvDtL48T0sHJGKCw==
 
+"@tanstack/[email protected]":
+  version "5.24.0"
+  resolved "https://registry.yarnpkg.com/@tanstack/query-devtools/-/query-devtools-5.24.0.tgz#b9b7828d42d5034415b1973ff4a154e880b17d59"
+  integrity sha512-pThim455t69zrZaQKa7IRkEIK8UBTS+gHVAdNfhO72Xh4rWpMc63ovRje5/n6iw63+d6QiJzVadsJVdPoodSeQ==
+
+"@tanstack/react-query-devtools@^5.24.1":
+  version "5.24.1"
+  resolved "https://registry.yarnpkg.com/@tanstack/react-query-devtools/-/react-query-devtools-5.24.1.tgz#e3a8ea71115fb899119126e1507fc340ee9d9496"
+  integrity sha512-qa4SEugN+EF8JJXcpsM9Lu05HfUv5cvHvLuB0uw/81eJZyNHFdtHFBi5RLCgpBrOyVMDfH8UQ3VBMqXzFKV68A==
+  dependencies:
+    "@tanstack/query-devtools" "5.24.0"
+
 "@tanstack/react-query@^5.18.1":
   version "5.18.1"
   resolved "https://registry.yarnpkg.com/@tanstack/react-query/-/react-query-5.18.1.tgz#fd4e7b87260e82c5277355ad64f0e431a9302e02"