‫So now the time has finally come
‫where we can connect
‫our supabase data with our React application.
‫And actually this is all gonna be really, really easy
‫because if we come back here to the API documentation page
‫then right here in this introduction
‫they give us all the instructions that we need
‫in order to do this connection.
‫So remember how I said earlier
‫that we can either use this api, so this restful url
‫so basically this URL to connect to the restful api
‫or we can use the client JavaScript library.
‫So that's what we're going to do now.
‫So here they give us all the instructions for doing so.
‫And so let's start by copying here, this NPM install string.
‫And so with this
‫we just install the supabase JavaScript library
‫on our project that then that's also immediately
‫in our services create a new file.
‫So this is basically a supabase client
‫where we will initialize the supabase API
‫and create a client so
‫that we can then start querying our database.
‫And so all the code that we need there is actually
‫right here.
‫So let's copy that and paste it right here.
‫So here we have our supabase url.
‫Then here we will need to place our supabase key.
‫And finally we create a supabase client
‫based on these two informations.
‫And then we can export that from here.
‫So let's say export default, supabase, and then
‫in some other file we can import this supabase client
‫and start querying.
‫All right?
‫And so now let's actually grab our supabase key from here
‫and place it into that file.
‫So that's here in the project settings and under api.
‫So here we have our URL again, and then here that anon key.
‫And so as I said in the last lecture, also this key
‫is safe to use in a browser if we enabled
‫row level security.
‫So let's copy this and let's replace it right here.
‫So again, you might be wondering that if we are
‫exposing our supabase key on the client, that
‫then some malicious user might be able to hack our database.
‫And the answer
‫Would actually be true
‫if we didn't activate row level security.
‫But since we did
‫anyone who has this key can only do whatever we allowed
‫in the row level security policies.
‫And so right now remember
‫that the only thing that we allow is to read data
‫from our four tables.
‫And so that's the reason why it is completely
‫safe to expose this key here to the client.
‫So even if anyone steals this, they can't do anything
‫with it unless we allow it in a role level security policy.
‫Alright, so that is hopefully settled.
‫And so let's now create a new file here
‫for a service called API cabins.
‫So for each of our tables
‫we will create one service here basically.
‫And so this is similar
‫to what we did earlier in the previous project.
‫So here we're gonna have a bunch of functions
‫and the first one will be
‫a function to get cabins.
‫So just like this, and we will probably want to
‫export this one here and this will be
‫an async function as well.
‫And so let's return to our API page,
‫and then let's go to cabins.
‫And then what we want to do is to select all the columns.
‫So basically read all the rows.
‫And so we can actually just copy this snippet here
‫place that here.
‫And so let's see what we have.
‫So here we are using the supabase client, which now
‫we need to import here.
‫Which is exactly this one
‫that we just created earlier.
‫And so as I was saying earlier, we will now basically
‫query this supabase client.
‫So creating queries that will then return in this case
‫from the cabin, all of the fields.
‫So that's what this here means.
‫So let's adapt this here a little bit.
‫Here there's no need to rename this,
‫let's just call it data.
‫And let's also check if there is an error.
‫So if so then let's log something to the console.
‫Maybe even do an console dot error.
‫So cabins could not be loaded.
‫And then throw a new error.
‫And actually here, let's use this string.
‫And here we will just want to
‫lock that error.
‫Alright, but if everything is well
‫then we will just return that data.
‫Okay, so let's just recap.
‫So from the supabase client
‫we can now create queries with the from method.
‫And so then we specify the name
‫of the table and then the fields that we want.
‫And so here we want basically all of them.
‫And so this returns a promise which we then await.
‫And the result of that
‫gives us the data and a possible error.
‫So if there is no error, then we simply return that data.
‫And so now we are ready to use this service anywhere
‫in our application.
‫And let's do so just
‫as an experiment here in the cabin's page.
‫So even though we said earlier
‫that we were not going to do side effects inside pages
‫let's just do this as an experiment.
‫So as soon as this page loads
‫let's basically fetch that data.
‫So we're using an effect here just to run
‫at the very beginning.
‫So what we want is get cabins, which will then be imported
‫from our services that we just created.
‫And since this is an async function
‫we need to then handle that.
‫And here, let's just use a "then".
‫And then all we want to do here is to
‫lock that data to the console.
‫So again, just an experiment
‫but this should already be working.
‫So let's see.
‫So from now on, we will not really need this anymore.
‫So let's check, let's just reload
‫and then coming to the cabins and beautiful.
‫So that should be our data there.
‫And indeed it is.
‫This is exactly the cabin that we created a few videos ago.
‫So congratulations.
‫You just created yourself a backend
‫and you have successfully connected it
‫with your front end application
‫which in this case is our React application.
‫Great. So this is actually really empowering
‫because this allows you now to really
‫create full stack applications simply
‫by leveraging a service like supabase.
‫So really, really cool stuff, and I'm really happy
‫about the service and about how easy it is to
‫build full stack applications with it.