optimistic updates, learn mutations

Author: nejcrogelsek

README.md

@@ -65,8 +65,8 @@ Polling is paused when the window lose focus. To fix that issue we can set `refe
 
 Combine polling with callbacks. Use the `refetchInterval` option to pull the api data every 3 seconds. Behind the scenes add a fourth superhero of your choice to the superheroes array in `db.json`.
 
-    a.) Within the onSuccess callback check if the number of heroes is 4 and ifit is the case I want you to stop the polling.
-    b.) Within the onError callback I want you to stop the polling.
+    a) Within the onSuccess callback check if the number of heroes is 4 and ifit is the case I want you to stop the polling.
+    b) Within the onError callback I want you to stop the polling.
 
 Hint:
 Mantain state variable whose initial value is 3000. State variable will be assigned to `refetchInterval` configuration. In callbacks check for the response / errors and set the state variable to false.
@@ -83,9 +83,9 @@ In our example we transformed data to be an array of just heroes names instead o
 
 We can query by id in two ways (look commits under branch name: `feature/12-queryById`).
 
-    a.) Solution 1 or first commit: **QueryById with manuali passed ID**
+    	a) Solution 1 or first commit: **QueryById with manuali passed ID**
     		- We can manually pass id into fetch function: file `useSuperHeroData`
-    b.) Solution 2 or second commit: **QueryById with react-query automatic passed id**
+    	b) Solution 2 or second commit: **QueryById with react-query automatic passed id**
     		- React query automatically pass id into fetch function: file `useSuperHeroData`
 
 **9. react-query - Parallel queries**
@@ -108,6 +108,15 @@ If we add flag `keepPreviousData` into the useQuery options, when we paginate to
 
 Handling mutation response will save you additional network request.
 
+**14. react-query - Optimistic updates**
+Updating the state before performing a mutation under the assumption that nothing can go wrong.
+
+`onMutate:` is called before the mutation function is fired and is passed the same variables that mutation function would receive.
+a) Cancel any outgoing refetches so they don't override our optimistic update.
+b) Get a hold of the current query data before we make any update. This will help us role back in case the mutation fails.
+`onError:` is called if the mutation encounters an error.
+`onSettled:` is called if the mutation is either successfull or encounters an error. `invalidateQueries` will ensure client state is in sync with server state. The user will not notice a difference.
+
 ## Available Scripts
 
 In the project directory, you can run:

db.json

@@ -44,6 +44,11 @@
       "name": "Test",
       "alterEgo": "Test",
       "id": 9
+    },
+    {
+      "name": "hello",
+      "alterEgo": "world",
+      "id": 10
     }
   ],
   "friends": [

src/lib/hooks/useSuperHeroesData.tsx

@@ -25,13 +25,38 @@ export const useSuperHeroesData = ({ onSuccess, onError }: Props) => {
 export const useAddSuperHeroData = () => {
   const queryClient = useQueryClient()
   return useMutation(addSuperHero, {
-    onSuccess: (response) => {
+    // onSuccess: (response) => {
+    //   queryClient.setQueryData('super-heroes', (oldQueryData: any) => {
+    //     return {
+    //       ...oldQueryData,
+    //       data: [...oldQueryData.data, response.data],
+    //     }
+    //   })
+    // },
+    onMutate: async (newHero) => {
+      await queryClient.cancelQueries('super-heroes')
+      const previousHeroData = queryClient.getQueryData('super-heroes')
       queryClient.setQueryData('super-heroes', (oldQueryData: any) => {
         return {
           ...oldQueryData,
-          data: [...oldQueryData.data, response.data],
+          data: [
+            ...oldQueryData.data,
+            {
+              id: oldQueryData.data.length + 1,
+              ...newHero,
+            },
+          ],
         }
       })
+      return {
+        previousHeroData,
+      }
+    },
+    onError: (_error, _hero, context: any) => {
+      queryClient.setQueryData('super-heroes', context.previousHeroData)
+    },
+    onSettled: () => {
+      queryClient.invalidateQueries('super-heroes')
     },
   })
 }