1
00:00:01,170 --> 00:00:04,170
‫So now the time has finally come

2
00:00:04,170 --> 00:00:05,550
‫where we can connect

3
00:00:05,550 --> 00:00:09,843
‫our supabase data with our React application.

4
00:00:11,370 --> 00:00:15,390
‫And actually this is all gonna be really, really easy

5
00:00:15,390 --> 00:00:20,390
‫because if we come back here to the API documentation page

6
00:00:20,430 --> 00:00:23,340
‫then right here in this introduction

7
00:00:23,340 --> 00:00:25,920
‫they give us all the instructions that we need

8
00:00:25,920 --> 00:00:28,233
‫in order to do this connection.

9
00:00:29,190 --> 00:00:31,620
‫So remember how I said earlier

10
00:00:31,620 --> 00:00:35,830
‫that we can either use this api, so this restful url

11
00:00:36,810 --> 00:00:41,550
‫so basically this URL to connect to the restful api

12
00:00:41,550 --> 00:00:44,970
‫or we can use the client JavaScript library.

13
00:00:44,970 --> 00:00:46,820
‫So that's what we're going to do now.

14
00:00:47,820 --> 00:00:51,960
‫So here they give us all the instructions for doing so.

15
00:00:51,960 --> 00:00:56,960
‫And so let's start by copying here, this NPM install string.

16
00:01:00,450 --> 00:01:02,010
‫And so with this

17
00:01:02,010 --> 00:01:05,970
‫we just install the supabase JavaScript library

18
00:01:05,970 --> 00:01:10,800
‫on our project that then that's also immediately

19
00:01:10,800 --> 00:01:14,700
‫in our services create a new file.

20
00:01:14,700 --> 00:01:17,950
‫So this is basically a supabase client

21
00:01:19,080 --> 00:01:22,770
‫where we will initialize the supabase API

22
00:01:22,770 --> 00:01:24,480
‫and create a client so

23
00:01:24,480 --> 00:01:27,903
‫that we can then start querying our database.

24
00:01:29,190 --> 00:01:32,850
‫And so all the code that we need there is actually

25
00:01:32,850 --> 00:01:33,683
‫right here.

26
00:01:34,650 --> 00:01:39,633
‫So let's copy that and paste it right here.

27
00:01:40,620 --> 00:01:43,200
‫So here we have our supabase url.

28
00:01:43,200 --> 00:01:46,620
‫Then here we will need to place our supabase key.

29
00:01:46,620 --> 00:01:49,920
‫And finally we create a supabase client

30
00:01:49,920 --> 00:01:52,110
‫based on these two informations.

31
00:01:52,110 --> 00:01:55,200
‫And then we can export that from here.

32
00:01:55,200 --> 00:02:00,200
‫So let's say export default, supabase, and then

33
00:02:00,840 --> 00:02:04,710
‫in some other file we can import this supabase client

34
00:02:04,710 --> 00:02:06,273
‫and start querying.

35
00:02:07,470 --> 00:02:08,490
‫All right?

36
00:02:08,490 --> 00:02:13,490
‫And so now let's actually grab our supabase key from here

37
00:02:14,010 --> 00:02:15,753
‫and place it into that file.

38
00:02:16,800 --> 00:02:20,463
‫So that's here in the project settings and under api.

39
00:02:23,010 --> 00:02:28,010
‫So here we have our URL again, and then here that anon key.

40
00:02:28,170 --> 00:02:31,980
‫And so as I said in the last lecture, also this key

41
00:02:31,980 --> 00:02:34,680
‫is safe to use in a browser if we enabled

42
00:02:34,680 --> 00:02:36,243
‫row level security.

43
00:02:37,830 --> 00:02:42,830
‫So let's copy this and let's replace it right here.

44
00:02:45,930 --> 00:02:49,380
‫So again, you might be wondering that if we are

45
00:02:49,380 --> 00:02:53,160
‫exposing our supabase key on the client, that

46
00:02:53,160 --> 00:02:57,930
‫then some malicious user might be able to hack our database.

47
00:02:57,930 --> 00:02:58,860
‫And the answer

48
00:02:58,860 --> 00:03:00,690
‫Would actually be true

49
00:03:00,690 --> 00:03:04,380
‫if we didn't activate row level security.

50
00:03:04,380 --> 00:03:06,000
‫But since we did

51
00:03:06,000 --> 00:03:10,230
‫anyone who has this key can only do whatever we allowed

52
00:03:10,230 --> 00:03:13,140
‫in the row level security policies.

53
00:03:13,140 --> 00:03:15,210
‫And so right now remember

54
00:03:15,210 --> 00:03:18,930
‫that the only thing that we allow is to read data

55
00:03:18,930 --> 00:03:20,940
‫from our four tables.

56
00:03:20,940 --> 00:03:24,060
‫And so that's the reason why it is completely

57
00:03:24,060 --> 00:03:28,740
‫safe to expose this key here to the client.

58
00:03:28,740 --> 00:03:31,770
‫So even if anyone steals this, they can't do anything

59
00:03:31,770 --> 00:03:36,393
‫with it unless we allow it in a role level security policy.

60
00:03:37,380 --> 00:03:41,520
‫Alright, so that is hopefully settled.

61
00:03:41,520 --> 00:03:44,250
‫And so let's now create a new file here

62
00:03:44,250 --> 00:03:49,083
‫for a service called API cabins.

63
00:03:50,040 --> 00:03:51,690
‫So for each of our tables

64
00:03:51,690 --> 00:03:54,990
‫we will create one service here basically.

65
00:03:54,990 --> 00:03:56,100
‫And so this is similar

66
00:03:56,100 --> 00:04:00,150
‫to what we did earlier in the previous project.

67
00:04:00,150 --> 00:04:03,090
‫So here we're gonna have a bunch of functions

68
00:04:03,090 --> 00:04:04,750
‫and the first one will be

69
00:04:06,210 --> 00:04:08,463
‫a function to get cabins.

70
00:04:12,900 --> 00:04:17,070
‫So just like this, and we will probably want to

71
00:04:17,070 --> 00:04:20,010
‫export this one here and this will be

72
00:04:20,010 --> 00:04:22,353
‫an async function as well.

73
00:04:23,400 --> 00:04:28,400
‫And so let's return to our API page,

74
00:04:28,667 --> 00:04:31,080
‫and then let's go to cabins.

75
00:04:31,080 --> 00:04:35,550
‫And then what we want to do is to select all the columns.

76
00:04:35,550 --> 00:04:37,830
‫So basically read all the rows.

77
00:04:37,830 --> 00:04:42,220
‫And so we can actually just copy this snippet here

78
00:04:44,040 --> 00:04:46,320
‫place that here.

79
00:04:46,320 --> 00:04:47,883
‫And so let's see what we have.

80
00:04:48,870 --> 00:04:51,794
‫So here we are using the supabase client, which now

81
00:04:51,794 --> 00:04:53,673
‫we need to import here.

82
00:04:55,290 --> 00:04:57,600
‫Which is exactly this one

83
00:04:57,600 --> 00:04:59,730
‫that we just created earlier.

84
00:04:59,730 --> 00:05:03,150
‫And so as I was saying earlier, we will now basically

85
00:05:03,150 --> 00:05:06,270
‫query this supabase client.

86
00:05:06,270 --> 00:05:09,990
‫So creating queries that will then return in this case

87
00:05:09,990 --> 00:05:13,260
‫from the cabin, all of the fields.

88
00:05:13,260 --> 00:05:15,183
‫So that's what this here means.

89
00:05:16,200 --> 00:05:18,843
‫So let's adapt this here a little bit.

90
00:05:19,920 --> 00:05:22,200
‫Here there's no need to rename this,

91
00:05:22,200 --> 00:05:23,883
‫let's just call it data.

92
00:05:25,704 --> 00:05:28,470
‫And let's also check if there is an error.

93
00:05:28,470 --> 00:05:33,470
‫So if so then let's log something to the console.

94
00:05:33,930 --> 00:05:36,693
‫Maybe even do an console dot error.

95
00:05:37,890 --> 00:05:42,183
‫So cabins could not be loaded.

96
00:05:44,460 --> 00:05:48,273
‫And then throw a new error.

97
00:05:49,140 --> 00:05:53,103
‫And actually here, let's use this string.

98
00:05:54,330 --> 00:05:57,120
‫And here we will just want to

99
00:05:57,120 --> 00:05:58,203
‫lock that error.

100
00:06:00,420 --> 00:06:03,390
‫Alright, but if everything is well

101
00:06:03,390 --> 00:06:06,453
‫then we will just return that data.

102
00:06:08,070 --> 00:06:11,340
‫Okay, so let's just recap.

103
00:06:11,340 --> 00:06:13,200
‫So from the supabase client

104
00:06:13,200 --> 00:06:17,010
‫we can now create queries with the from method.

105
00:06:17,010 --> 00:06:19,050
‫And so then we specify the name

106
00:06:19,050 --> 00:06:21,930
‫of the table and then the fields that we want.

107
00:06:21,930 --> 00:06:25,080
‫And so here we want basically all of them.

108
00:06:25,080 --> 00:06:28,500
‫And so this returns a promise which we then await.

109
00:06:28,500 --> 00:06:29,790
‫And the result of that

110
00:06:29,790 --> 00:06:33,090
‫gives us the data and a possible error.

111
00:06:33,090 --> 00:06:36,570
‫So if there is no error, then we simply return that data.

112
00:06:36,570 --> 00:06:40,170
‫And so now we are ready to use this service anywhere

113
00:06:40,170 --> 00:06:41,550
‫in our application.

114
00:06:41,550 --> 00:06:43,200
‫And let's do so just

115
00:06:43,200 --> 00:06:47,190
‫as an experiment here in the cabin's page.

116
00:06:47,190 --> 00:06:49,113
‫So even though we said earlier

117
00:06:49,113 --> 00:06:53,728
‫that we were not going to do side effects inside pages

118
00:06:53,728 --> 00:06:56,763
‫let's just do this as an experiment.

119
00:06:57,630 --> 00:07:00,220
‫So as soon as this page loads

120
00:07:01,920 --> 00:07:03,903
‫let's basically fetch that data.

121
00:07:05,040 --> 00:07:09,646
‫So we're using an effect here just to run

122
00:07:09,646 --> 00:07:11,283
‫at the very beginning.

123
00:07:13,050 --> 00:07:18,050
‫So what we want is get cabins, which will then be imported

124
00:07:18,480 --> 00:07:20,883
‫from our services that we just created.

125
00:07:21,720 --> 00:07:24,330
‫And since this is an async function

126
00:07:24,330 --> 00:07:26,280
‫we need to then handle that.

127
00:07:26,280 --> 00:07:28,887
‫And here, let's just use a "then".

128
00:07:30,390 --> 00:07:33,570
‫And then all we want to do here is to

129
00:07:33,570 --> 00:07:35,793
‫lock that data to the console.

130
00:07:37,290 --> 00:07:39,180
‫So again, just an experiment

131
00:07:39,180 --> 00:07:41,523
‫but this should already be working.

132
00:07:42,510 --> 00:07:43,743
‫So let's see.

133
00:07:45,120 --> 00:07:47,793
‫So from now on, we will not really need this anymore.

134
00:07:48,930 --> 00:07:52,080
‫So let's check, let's just reload

135
00:07:52,080 --> 00:07:56,943
‫and then coming to the cabins and beautiful.

136
00:07:57,810 --> 00:08:01,020
‫So that should be our data there.

137
00:08:01,020 --> 00:08:02,730
‫And indeed it is.

138
00:08:02,730 --> 00:08:07,440
‫This is exactly the cabin that we created a few videos ago.

139
00:08:07,440 --> 00:08:09,120
‫So congratulations.

140
00:08:09,120 --> 00:08:11,495
‫You just created yourself a backend

141
00:08:11,495 --> 00:08:14,211
‫and you have successfully connected it

142
00:08:14,211 --> 00:08:16,470
‫with your front end application

143
00:08:16,470 --> 00:08:20,400
‫which in this case is our React application.

144
00:08:20,400 --> 00:08:23,760
‫Great. So this is actually really empowering

145
00:08:23,760 --> 00:08:26,220
‫because this allows you now to really

146
00:08:26,220 --> 00:08:28,890
‫create full stack applications simply

147
00:08:28,890 --> 00:08:32,310
‫by leveraging a service like supabase.

148
00:08:32,310 --> 00:08:36,270
‫So really, really cool stuff, and I'm really happy

149
00:08:36,270 --> 00:08:40,200
‫about the service and about how easy it is to

150
00:08:40,200 --> 00:08:42,483
‫build full stack applications with it.