handle mutation response

Author: nejcrogelsek

README.md

@@ -104,6 +104,10 @@ On react-query heroes page we have displayed different heroes. If we click on th
 
 If we add flag `keepPreviousData` into the useQuery options, when we paginate to next page, the data from the previous page is still displayed till the new data is successfully fetched.
 
+**13. react-query - Handling mutation response**
+
+Handling mutation response will save you additional network request.
+
 ## Available Scripts
 
 In the project directory, you can run:

db.json

@@ -39,6 +39,11 @@
       "name": "Add automatic",
       "alterEgo": "Okej it works",
       "id": 8
+    },
+    {
+      "name": "Test",
+      "alterEgo": "Test",
+      "id": 9
     }
   ],
   "friends": [

src/lib/hooks/useSuperHeroesData.tsx

@@ -25,8 +25,13 @@ export const useSuperHeroesData = ({ onSuccess, onError }: Props) => {
 export const useAddSuperHeroData = () => {
   const queryClient = useQueryClient()
   return useMutation(addSuperHero, {
-    onSuccess: () => {
-      queryClient.invalidateQueries('super-heroes')
+    onSuccess: (response) => {
+      queryClient.setQueryData('super-heroes', (oldQueryData: any) => {
+        return {
+          ...oldQueryData,
+          data: [...oldQueryData.data, response.data],
+        }
+      })
     },
   })
 }