1
00:00:01,200 --> 00:00:02,790
‫So we learned how to

2
00:00:02,790 --> 00:00:05,700
‫fetch and store data in the cache

3
00:00:05,700 --> 00:00:07,890
‫using the "useQuery" hook.

4
00:00:07,890 --> 00:00:09,780
‫But now it's time to learn

5
00:00:09,780 --> 00:00:13,980
‫how to also mutate our remote server state.

6
00:00:13,980 --> 00:00:15,780
‫And so in this lecture,

7
00:00:15,780 --> 00:00:18,450
‫let's learn how we can use the power of

8
00:00:18,450 --> 00:00:21,390
‫React Query to Delete a cabin

9
00:00:21,390 --> 00:00:25,113
‫and automatically re-render the user interface.

10
00:00:26,730 --> 00:00:28,080
‫So first of all,

11
00:00:28,080 --> 00:00:31,440
‫let's come back here to our services.

12
00:00:31,440 --> 00:00:34,560
‫So to this file where we basically

13
00:00:34,560 --> 00:00:37,320
‫interact with the cabin's API.

14
00:00:37,320 --> 00:00:38,850
‫And so here, let's start,

15
00:00:38,850 --> 00:00:42,060
‫by creating a function called "deleteCabin."

16
00:00:43,890 --> 00:00:46,620
‫So this will need to take in the ID

17
00:00:46,620 --> 00:00:49,050
‫of the cabin that we want to Delete,

18
00:00:49,050 --> 00:00:50,050
‫and it's going to be

19
00:00:51,900 --> 00:00:52,733
‫an async

20
00:00:54,450 --> 00:00:55,283
‫function

21
00:00:55,283 --> 00:00:57,303
‫that we want to delete from here.

22
00:00:58,860 --> 00:00:59,910
‫Now, okay?

23
00:00:59,910 --> 00:01:01,830
‫And now just like before,

24
00:01:01,830 --> 00:01:05,010
‫let's actually automatically get our code

25
00:01:05,010 --> 00:01:09,690
‫here from the automatically generated API docs.

26
00:01:09,690 --> 00:01:11,910
‫So I will open this in another tab

27
00:01:11,910 --> 00:01:15,990
‫so that we can keep our table here open at all times.

28
00:01:15,990 --> 00:01:18,840
‫And so here, let's click on "cabins."

29
00:01:18,840 --> 00:01:21,810
‫And then probably somewhere here at the end,

30
00:01:21,810 --> 00:01:25,980
‫we have the code on where to delete rows.

31
00:01:25,980 --> 00:01:28,560
‫And here it is.

32
00:01:28,560 --> 00:01:29,913
‫So let's copy this,

33
00:01:30,780 --> 00:01:32,700
‫paste that here.

34
00:01:32,700 --> 00:01:34,500
‫Or of course if you want,

35
00:01:34,500 --> 00:01:35,730
‫if you prefer,

36
00:01:35,730 --> 00:01:38,790
‫you can also write this here by hand.

37
00:01:38,790 --> 00:01:40,920
‫But anyway, what this does

38
00:01:40,920 --> 00:01:41,850
‫is to again,

39
00:01:41,850 --> 00:01:45,870
‫take our "supabase" client that we created earlier,

40
00:01:45,870 --> 00:01:47,277
‫so this one right here,

41
00:01:47,277 --> 00:01:50,130
‫and then it will select the cabins table

42
00:01:50,130 --> 00:01:52,500
‫and it will delete from there.

43
00:01:52,500 --> 00:01:55,500
‫But of course it shouldn't delete everything.

44
00:01:55,500 --> 00:01:59,250
‫And so we need to tell "supabase" also what to delete.

45
00:01:59,250 --> 00:02:02,100
‫And so here we then basically select the row

46
00:02:02,100 --> 00:02:03,930
‫that we want to delete.

47
00:02:03,930 --> 00:02:07,060
‫And so that row is where the ID column

48
00:02:08,520 --> 00:02:12,040
‫is equal to the ID that we paste in here.

49
00:02:13,613 --> 00:02:18,033
‫And now let's just actually Delete this.

50
00:02:20,070 --> 00:02:24,840
‫So "Cabin could not be deleted."

51
00:02:24,840 --> 00:02:27,000
‫And that's actually it.

52
00:02:27,000 --> 00:02:30,570
‫Now, if we were to attempt to call this function now

53
00:02:30,570 --> 00:02:33,390
‫then actually nothing would happen.

54
00:02:33,390 --> 00:02:35,310
‫And the reason for that is that

55
00:02:35,310 --> 00:02:39,333
‫we activated row level security on this table.

56
00:02:40,380 --> 00:02:45,380
‫So let's go to our row level security policies right here.

57
00:02:45,600 --> 00:02:48,240
‫So in authentication and then policies.

58
00:02:48,240 --> 00:02:49,740
‫And so indeed here,

59
00:02:49,740 --> 00:02:51,900
‫the only rule that we have

60
00:02:51,900 --> 00:02:54,450
‫or the only policy for the cabins

61
00:02:54,450 --> 00:02:57,480
‫is that users are able to select.

62
00:02:57,480 --> 00:03:02,220
‫So basically to read data from the table, but nothing else.

63
00:03:02,220 --> 00:03:06,030
‫So if we want to also enable users to Delete,

64
00:03:06,030 --> 00:03:08,523
‫we need to create a new policy for that.

65
00:03:09,630 --> 00:03:12,270
‫So let's click on New Policy,

66
00:03:12,270 --> 00:03:14,820
‫then let's again use the first one,

67
00:03:14,820 --> 00:03:18,903
‫and so now we will temporarily allow everyone to Delete.

68
00:03:20,670 --> 00:03:22,020
‫However, later on,

69
00:03:22,020 --> 00:03:23,790
‫we will then change this policy

70
00:03:23,790 --> 00:03:26,490
‫to only allow logged in users,

71
00:03:26,490 --> 00:03:28,110
‫so authenticated users,

72
00:03:28,110 --> 00:03:31,320
‫to actually Delete cabins.

73
00:03:31,320 --> 00:03:35,400
‫And the same will be true for Insert, Update and Delete.

74
00:03:35,400 --> 00:03:38,250
‫But now let's select here Delete,

75
00:03:38,250 --> 00:03:40,980
‫instead of Select, which is read.

76
00:03:40,980 --> 00:03:43,413
‫Then here, let's also give this another name.

77
00:03:45,120 --> 00:03:48,153
‫So enable Delete for all users.

78
00:03:50,640 --> 00:03:52,890
‫So make sure that you create this policy

79
00:03:52,890 --> 00:03:53,760
‫because otherwise

80
00:03:53,760 --> 00:03:56,280
‫the function that we created earlier

81
00:03:56,280 --> 00:03:58,260
‫is not going to work.

82
00:03:58,260 --> 00:04:00,580
‫And now before we actually start deleting

83
00:04:03,470 --> 00:04:04,710
‫some rows here,

84
00:04:04,710 --> 00:04:07,710
‫let's just create a few more cabins here.

85
00:04:07,710 --> 00:04:09,420
‫So just really fast

86
00:04:09,420 --> 00:04:12,317
‫because this really doesn't matter here

87
00:04:12,317 --> 00:04:15,813
‫'cause we will just delete them all, anyway, very soon.

88
00:04:18,690 --> 00:04:19,840
‫So I will just create

89
00:04:22,320 --> 00:04:25,503
‫like three more here.

90
00:04:27,930 --> 00:04:30,930
‫You can, of course, use whatever values that you want.

91
00:04:30,930 --> 00:04:34,443
‫This is just so we don't run out of cabins to delete later.

92
00:04:39,660 --> 00:04:41,760
‫So these are luxury cabins,

93
00:04:41,760 --> 00:04:43,353
‫so they are a bit expensive.

94
00:04:45,450 --> 00:04:48,510
‫And yeah, with this we should have enough

95
00:04:48,510 --> 00:04:50,700
‫so we can actually delete them.

96
00:04:50,700 --> 00:04:51,810
‫And first of all,

97
00:04:51,810 --> 00:04:53,550
‫once we come back here now,

98
00:04:53,550 --> 00:04:57,870
‫notice how immediately our page re-fetches the data.

99
00:04:57,870 --> 00:05:02,870
‫So React Query now immediately makes all data here stale.

100
00:05:03,120 --> 00:05:06,630
‫And so that means that whenever we come back to this tab,

101
00:05:06,630 --> 00:05:08,820
‫the re-fetching will happen.

102
00:05:08,820 --> 00:05:10,740
‫So now because of that,

103
00:05:10,740 --> 00:05:13,350
‫we automatically, immediately,

104
00:05:13,350 --> 00:05:16,290
‫got all the cabins that we just created.

105
00:05:16,290 --> 00:05:19,590
‫So this is really, really nice, and really handy.

106
00:05:19,590 --> 00:05:22,080
‫And that's the reason why I said earlier

107
00:05:22,080 --> 00:05:26,640
‫that this really is my favorite React library to work with.

108
00:05:26,640 --> 00:05:29,190
‫And you will find out in this lecture

109
00:05:29,190 --> 00:05:30,750
‫one more reason for that.

110
00:05:30,750 --> 00:05:33,540
‫Which is that now we will use React Query

111
00:05:33,540 --> 00:05:36,513
‫to actually make this Delete button here work.

112
00:05:38,640 --> 00:05:42,930
‫So that Delete button is inside each cabin row.

113
00:05:42,930 --> 00:05:46,710
‫And so let's now use React Query in here

114
00:05:46,710 --> 00:05:48,723
‫to actually make that button work.

115
00:05:50,130 --> 00:05:54,180
‫So the way we do mutations is not by doing "useQuery,"

116
00:05:54,180 --> 00:05:55,860
‫but "useMutation."

117
00:05:58,530 --> 00:06:00,150
‫So just like this.

118
00:06:00,150 --> 00:06:01,110
‫And then here again,

119
00:06:01,110 --> 00:06:03,390
‫we need to paste in an object

120
00:06:03,390 --> 00:06:07,740
‫and the first element should be the "mutationFn."

121
00:06:07,740 --> 00:06:11,610
‫So this is the function that React Query will call,

122
00:06:11,610 --> 00:06:13,890
‫and so let's make this an arrow function,

123
00:06:13,890 --> 00:06:16,140
‫that will receive the ID

124
00:06:16,140 --> 00:06:20,070
‫and will then call the "deleteCabin" function

125
00:06:20,070 --> 00:06:22,020
‫that we just created

126
00:06:22,020 --> 00:06:24,033
‫with exactly that ID.

127
00:06:25,170 --> 00:06:26,790
‫And the way this is going to work

128
00:06:26,790 --> 00:06:27,870
‫will make sense to you

129
00:06:27,870 --> 00:06:30,720
‫when we actually then hook this up

130
00:06:30,720 --> 00:06:32,430
‫with the button there.

131
00:06:32,430 --> 00:06:33,840
‫So for now, just roll with this.

132
00:06:33,840 --> 00:06:36,813
‫And here, of course, it needs to be an actual arrow.

133
00:06:37,860 --> 00:06:40,620
‫All right, and this is actually already enough

134
00:06:40,620 --> 00:06:41,823
‫to make this work.

135
00:06:42,720 --> 00:06:44,340
‫So all we need to do now is to

136
00:06:44,340 --> 00:06:47,280
‫save the results of "useMutation."

137
00:06:48,526 --> 00:06:51,120
‫And here let's just immediately de-structure this.

138
00:06:51,120 --> 00:06:55,200
‫So we will get again the "isLoading" flag

139
00:06:55,200 --> 00:06:59,310
‫and then what we also get is a "mutate" function.

140
00:06:59,310 --> 00:07:01,980
‫And so this is then basically a callback function

141
00:07:01,980 --> 00:07:05,553
‫that we can connect with the button in this case.

142
00:07:07,290 --> 00:07:08,610
‫All right.

143
00:07:08,610 --> 00:07:11,130
‫So here all we have to do now

144
00:07:11,130 --> 00:07:14,710
‫is on the "onClick" prop

145
00:07:17,070 --> 00:07:20,760
‫to call this "mutate" function

146
00:07:20,760 --> 00:07:22,740
‫with the current ID.

147
00:07:22,740 --> 00:07:25,740
‫So let's grab that here as well.

148
00:07:25,740 --> 00:07:27,660
‫So from our prop,

149
00:07:27,660 --> 00:07:30,420
‫and let's rename this to "cabinId"

150
00:07:30,420 --> 00:07:32,343
‫just to make this really explicit.

151
00:07:37,800 --> 00:07:38,970
‫Give this a save,

152
00:07:38,970 --> 00:07:41,940
‫and this should actually already be it.

153
00:07:41,940 --> 00:07:43,440
‫Let's just also use this

154
00:07:43,440 --> 00:07:46,983
‫this "isLoading" state to disable this button.

155
00:07:49,380 --> 00:07:53,760
‫So "isLoading," or maybe this is not the best name.

156
00:07:53,760 --> 00:07:56,280
‫Let's call this here, "isDeleting."

157
00:08:01,890 --> 00:08:03,213
‫Just like this.

158
00:08:04,260 --> 00:08:05,700
‫Now, right.

159
00:08:05,700 --> 00:08:09,750
‫So basically this "mutate" here will be

160
00:08:09,750 --> 00:08:12,390
‫calling this function right here.

161
00:08:12,390 --> 00:08:14,340
‫And actually since we are inputting

162
00:08:14,340 --> 00:08:16,530
‫the same value that we're calling here,

163
00:08:16,530 --> 00:08:17,830
‫we can just make this

164
00:08:19,498 --> 00:08:21,720
‫"deleteCabin" like this.

165
00:08:21,720 --> 00:08:24,363
‫So that's gonna be just the exact same thing.

166
00:08:25,200 --> 00:08:28,200
‫So let's just reload here and then as we click

167
00:08:28,200 --> 00:08:29,973
‫this will then delete the cabin.

168
00:08:32,160 --> 00:08:34,230
‫Okay, so something happened

169
00:08:34,230 --> 00:08:37,530
‫but this is not really that ground breaking yet.

170
00:08:37,530 --> 00:08:40,563
‫Because actually the UI didn't even update.

171
00:08:42,060 --> 00:08:44,160
‫So to make sure that cabin number two

172
00:08:44,160 --> 00:08:45,810
‫has actually been deleted,

173
00:08:45,810 --> 00:08:48,000
‫let's manually reload here.

174
00:08:48,000 --> 00:08:51,600
‫And so indeed cabin number two is gone.

175
00:08:51,600 --> 00:08:53,340
‫So our deletion worked,

176
00:08:53,340 --> 00:08:55,710
‫but again, up until this point,

177
00:08:55,710 --> 00:08:57,720
‫this is nothing so special,

178
00:08:57,720 --> 00:08:59,730
‫But we can make it special,

179
00:08:59,730 --> 00:09:01,890
‫or at least a bit more helpful,

180
00:09:01,890 --> 00:09:04,500
‫by also invalidating the cache

181
00:09:04,500 --> 00:09:07,500
‫as soon as this mutation is done.

182
00:09:07,500 --> 00:09:08,550
‫And so for that

183
00:09:08,550 --> 00:09:11,973
‫we can specify the "onSuccess" callback.

184
00:09:13,920 --> 00:09:17,877
‫So "onSuccess" and this then also accepts a function.

185
00:09:17,877 --> 00:09:20,190
‫And so here we can basically tell

186
00:09:20,190 --> 00:09:22,020
‫React Query what to do

187
00:09:22,020 --> 00:09:25,350
‫as soon as the mutation was successful.

188
00:09:25,350 --> 00:09:27,480
‫So, what do we want to do?

189
00:09:27,480 --> 00:09:31,140
‫Well, we basically want to re-fetch the data here

190
00:09:31,140 --> 00:09:32,550
‫in this situation.

191
00:09:32,550 --> 00:09:35,010
‫And the way this works in React Query,

192
00:09:35,010 --> 00:09:38,460
‫is by invalidating the cache.

193
00:09:38,460 --> 00:09:40,800
‫And here we can actually do that manually.

194
00:09:40,800 --> 00:09:41,970
‫So if I click here,

195
00:09:41,970 --> 00:09:43,980
‫it will then fetch again,

196
00:09:43,980 --> 00:09:45,120
‫and then...

197
00:09:45,120 --> 00:09:49,170
‫And after that, the data becomes stale right away again.

198
00:09:49,170 --> 00:09:50,850
‫But what matters is that

199
00:09:50,850 --> 00:09:54,090
‫as soon as we invalidate this cache,

200
00:09:54,090 --> 00:09:56,880
‫so this data with this key right here,

201
00:09:56,880 --> 00:10:00,120
‫then that will immediately fetch again.

202
00:10:00,120 --> 00:10:01,860
‫Because as the name says,

203
00:10:01,860 --> 00:10:04,620
‫this data is then invalid.

204
00:10:04,620 --> 00:10:06,510
‫Or the Query is invalid.

205
00:10:06,510 --> 00:10:07,803
‫So that's the same thing.

206
00:10:09,060 --> 00:10:12,180
‫So the way that we do this in our code,

207
00:10:12,180 --> 00:10:15,600
‫so of course we don't want our users to click there,

208
00:10:15,600 --> 00:10:18,300
‫is to get the Query client

209
00:10:18,300 --> 00:10:21,633
‫and then call "invalidateQueries" on there.

210
00:10:22,740 --> 00:10:24,030
‫So again,

211
00:10:24,030 --> 00:10:26,400
‫that "invalidateQueries" function

212
00:10:26,400 --> 00:10:28,020
‫actually needs to be called

213
00:10:28,020 --> 00:10:30,060
‫on the "queryClient."

214
00:10:30,060 --> 00:10:31,740
‫So right here.

215
00:10:31,740 --> 00:10:33,540
‫So how do we get access

216
00:10:33,540 --> 00:10:36,540
‫to our "queryClient" instance?

217
00:10:36,540 --> 00:10:39,963
‫Well, for that we have a special hook.

218
00:10:41,010 --> 00:10:45,243
‫So it's a hook which will give us the "queryClient"

219
00:10:46,560 --> 00:10:48,610
‫and it is simply called "useQueryClient."

220
00:10:53,090 --> 00:10:54,030
‫All right?

221
00:10:54,030 --> 00:10:56,140
‫And so now in here we can say

222
00:10:57,069 --> 00:11:02,069
‫"queryClient.invalidateQueries."

223
00:11:03,060 --> 00:11:05,010
‫And then here is where we tell it

224
00:11:05,010 --> 00:11:07,050
‫which exact Query,

225
00:11:07,050 --> 00:11:09,107
‫so which exact data,

226
00:11:09,107 --> 00:11:10,773
‫should be invalidated.

227
00:11:11,910 --> 00:11:15,180
‫So we specify exactly the same "queryKey"

228
00:11:15,180 --> 00:11:17,610
‫that we have there in our dev tools.

229
00:11:17,610 --> 00:11:18,600
‫Or in other words,

230
00:11:18,600 --> 00:11:21,930
‫this one that we defined for this Query.

231
00:11:21,930 --> 00:11:25,020
‫And so this is one of the reasons why it is so important

232
00:11:25,020 --> 00:11:28,170
‫that each Query is uniquely identified.

233
00:11:28,170 --> 00:11:30,930
‫Because then we can now invalidate this Query

234
00:11:30,930 --> 00:11:33,093
‫so that it will fetch again.

235
00:11:35,670 --> 00:11:38,460
‫So that's called "cabins,"

236
00:11:38,460 --> 00:11:39,993
‫and this should now work.

237
00:11:40,950 --> 00:11:42,330
‫So let's see.

238
00:11:42,330 --> 00:11:43,623
‫Let's Delete another one.

239
00:11:44,940 --> 00:11:47,490
‫And this time it looks as though

240
00:11:47,490 --> 00:11:48,690
‫nothing really happened,

241
00:11:49,800 --> 00:11:51,150
‫but it's actually gone.

242
00:11:51,150 --> 00:11:55,680
‫So maybe we have some bug here, but not really.

243
00:11:55,680 --> 00:11:59,040
‫So maybe we just needed to reload here.

244
00:11:59,040 --> 00:12:00,570
‫So let's Delete again,

245
00:12:00,570 --> 00:12:03,240
‫but that didn't work again.

246
00:12:03,240 --> 00:12:05,070
‫But if we invalidate manually

247
00:12:05,070 --> 00:12:07,470
‫then of course that will be gone.

248
00:12:07,470 --> 00:12:09,330
‫So something is wrong.

249
00:12:09,330 --> 00:12:13,770
‫And so let's maybe start by inspecting these "queryKeys."

250
00:12:13,770 --> 00:12:15,660
‫So here this is called "cabin,"

251
00:12:15,660 --> 00:12:17,490
‫and I think I remember,

252
00:12:17,490 --> 00:12:18,323
‫yeah.

253
00:12:18,323 --> 00:12:21,240
‫Here I actually invalidated "cabins."

254
00:12:21,240 --> 00:12:24,660
‫And this "cabins" actually makes a lot more sense

255
00:12:24,660 --> 00:12:28,980
‫because that's also the name in "supabase."

256
00:12:28,980 --> 00:12:32,190
‫So actually our data is called "cabins,"

257
00:12:32,190 --> 00:12:34,080
‫not just "cabin."

258
00:12:34,080 --> 00:12:35,730
‫And so now that reloaded,

259
00:12:35,730 --> 00:12:38,430
‫and we still have this other data here,

260
00:12:38,430 --> 00:12:42,660
‫but now as we reload, then of course that is gone.

261
00:12:42,660 --> 00:12:45,480
‫And now once I Delete this,

262
00:12:45,480 --> 00:12:47,370
‫then, beautiful.

263
00:12:47,370 --> 00:12:50,280
‫Then it automatically disappears from our UI

264
00:12:50,280 --> 00:12:52,920
‫because our data was re-fetched.

265
00:12:52,920 --> 00:12:57,390
‫And now we did run out of cabins to delete.

266
00:12:57,390 --> 00:12:58,800
‫So that's why I told you

267
00:12:58,800 --> 00:13:00,210
‫that we needed to create

268
00:13:00,210 --> 00:13:01,560
‫some here in the beginning.

269
00:13:02,880 --> 00:13:05,643
‫So let's just do two more.

270
00:13:07,920 --> 00:13:09,573
‫Well, not so many.

271
00:13:12,510 --> 00:13:14,523
‫And just another one here.

272
00:13:23,910 --> 00:13:26,103
‫All right, this should be enough.

273
00:13:27,150 --> 00:13:29,010
‫And there they are.

274
00:13:29,010 --> 00:13:30,270
‫And so now,

275
00:13:30,270 --> 00:13:33,183
‫the next thing that I want to quickly show you,

276
00:13:34,320 --> 00:13:38,190
‫so here is that besides the "onSuccess" handler,

277
00:13:38,190 --> 00:13:41,523
‫we also have the "onError" handler.

278
00:13:43,050 --> 00:13:46,620
‫And so this one receives the error that was actually thrown

279
00:13:46,620 --> 00:13:48,153
‫inside this function.

280
00:13:49,735 --> 00:13:51,900
‫So it receives it as an argument,

281
00:13:51,900 --> 00:13:55,380
‫and then here we can do anything we want with this.

282
00:13:55,380 --> 00:13:59,073
‫So let's "alert," in this case, the "err.message."

283
00:14:00,960 --> 00:14:03,963
‫And also let's "alert" something right here.

284
00:14:06,870 --> 00:14:07,917
‫So "Cabin,"

285
00:14:09,378 --> 00:14:11,343
‫and we should make this a string,

286
00:14:13,380 --> 00:14:16,857
‫so "successfully deleted."

287
00:14:21,090 --> 00:14:22,983
‫Well, this is not what I wanted.

288
00:14:23,940 --> 00:14:25,527
‫We want "alert."

289
00:14:27,150 --> 00:14:29,670
‫And so now in order to trigger this error,

290
00:14:29,670 --> 00:14:31,020
‫let's, for example,

291
00:14:31,020 --> 00:14:33,603
‫try to change something here.

292
00:14:35,344 --> 00:14:36,720
‫And so now this is wrong.

293
00:14:36,720 --> 00:14:38,730
‫And so now as we click here on Delete,

294
00:14:38,730 --> 00:14:41,373
‫we will not be able to delete this.

295
00:14:42,420 --> 00:14:47,010
‫So indeed we get the error: "Cabin could not be deleted,"

296
00:14:47,010 --> 00:14:49,500
‫and this is exactly the error message

297
00:14:49,500 --> 00:14:51,723
‫that we throw right here.

298
00:14:53,130 --> 00:14:54,480
‫All right.

299
00:14:54,480 --> 00:14:55,455
‫So here,

300
00:14:55,455 --> 00:14:57,660
‫this "supabase" client will not be able to connect

301
00:14:57,660 --> 00:14:58,770
‫to our API.

302
00:14:58,770 --> 00:15:00,810
‫It will therefore create an error.

303
00:15:00,810 --> 00:15:03,840
‫And so here in case there is this error

304
00:15:03,840 --> 00:15:06,690
‫we then throw a new error with this error message.

305
00:15:06,690 --> 00:15:09,840
‫And so then this is exactly what we get here

306
00:15:09,840 --> 00:15:11,610
‫because...

307
00:15:11,610 --> 00:15:12,443
‫As I was saying,

308
00:15:12,443 --> 00:15:14,280
‫this "onError" event handler

309
00:15:14,280 --> 00:15:17,250
‫gets access to exactly that error.

310
00:15:17,250 --> 00:15:20,313
‫So the error thrown in the mutation function.

311
00:15:23,130 --> 00:15:25,080
‫So let's close this here.

312
00:15:25,080 --> 00:15:27,330
‫And one very interesting thing

313
00:15:27,330 --> 00:15:28,910
‫that we might have noticed...

314
00:15:32,430 --> 00:15:33,570
‫Also down here,

315
00:15:33,570 --> 00:15:35,010
‫is that React Query

316
00:15:35,010 --> 00:15:38,670
‫actually, now of course, also failed to fetch.

317
00:15:38,670 --> 00:15:41,220
‫But we get all of these different errors,

318
00:15:41,220 --> 00:15:42,620
‫and the reason for that...

319
00:15:44,040 --> 00:15:47,160
‫So the reason that we get the error once,

320
00:15:47,160 --> 00:15:48,930
‫then here again, the same error,

321
00:15:48,930 --> 00:15:49,763
‫and then here,

322
00:15:49,763 --> 00:15:51,480
‫once again the same error,

323
00:15:51,480 --> 00:15:53,370
‫is that React Query actually

324
00:15:53,370 --> 00:15:56,070
‫tries to fetch multiple times.

325
00:15:56,070 --> 00:15:57,240
‫Whenever there's an error,

326
00:15:57,240 --> 00:15:58,710
‫React Query will try to

327
00:15:58,710 --> 00:16:01,170
‫fetch the data again a few times.

328
00:16:01,170 --> 00:16:02,760
‫So in order to help us

329
00:16:02,760 --> 00:16:04,830
‫in case that, for example,

330
00:16:04,830 --> 00:16:07,020
‫the error disappeared very quickly,

331
00:16:07,020 --> 00:16:07,853
‫and so then

332
00:16:07,853 --> 00:16:11,613
‫just trying a few times is actually pretty helpful.

333
00:16:13,200 --> 00:16:14,040
‫All right.

334
00:16:14,040 --> 00:16:15,453
‫But now, let's of course,

335
00:16:17,130 --> 00:16:18,423
‫correct this again.

336
00:16:19,740 --> 00:16:20,793
‫Let's reload.

337
00:16:21,720 --> 00:16:23,250
‫And so now as we Delete,

338
00:16:23,250 --> 00:16:27,093
‫not only will the UI automatically re-render,

339
00:16:28,200 --> 00:16:31,137
‫and we also get "Cabin successfully deleted."

340
00:16:33,120 --> 00:16:34,200
‫Great.

341
00:16:34,200 --> 00:16:37,650
‫So this is how mutations work in a nutshell.

342
00:16:37,650 --> 00:16:38,850
‫So we can keep

343
00:16:38,850 --> 00:16:41,670
‫all of the logic that is related to mutations

344
00:16:41,670 --> 00:16:43,200
‫all in one place.

345
00:16:43,200 --> 00:16:46,140
‫So all here in this object

346
00:16:46,140 --> 00:16:48,360
‫inside the "useMutation" hook.

347
00:16:48,360 --> 00:16:50,280
‫And by the end of the section

348
00:16:50,280 --> 00:16:52,560
‫you will also actually abstract this here

349
00:16:52,560 --> 00:16:54,210
‫into its own custom hook,

350
00:16:54,210 --> 00:16:56,910
‫to make this component really clean again.

351
00:16:56,910 --> 00:17:00,030
‫But for now, let's just keep it like this.

352
00:17:00,030 --> 00:17:01,350
‫Now, what I want to do next,

353
00:17:01,350 --> 00:17:03,240
‫is to quickly replace

354
00:17:03,240 --> 00:17:06,540
‫these very ugly alerts right here,

355
00:17:06,540 --> 00:17:09,180
‫with some real world notifications.

356
00:17:09,180 --> 00:17:13,200
‫So just like you see in every web application out there.

357
00:17:13,200 --> 00:17:16,770
‫And so let's make our application here also like that.

358
00:17:16,770 --> 00:17:18,603
‫So a bit more real world.