Invoking Supabase Edge Functions

[Music] [Music] hello everyone welcome back to our series on superbase edge functions now in the first quick start video we looked at how we can create new functions and deploy them and in this video we want to dive a little bit deeper into how we can test functions locally and invoke them with the javascript client library so here we actually have within the superbase superbase main repository in the examples folder we have a folder called edge functions i'm going to link this below as well and there we have a collection of functions that we can use as a starting point so right now we have two functions in here one is browser with course so if you want to call your function uh from the browser you will need to have some specific course headers in there and you can um see that here so the functions actually have a shared folder as well so this is how you can organize your code you have all your functions in separate folders and then you have a folder with an underscore where you can have shared clients so for example we have the superbase client in here and then also we have some course headers so for course to work so for us to be able to call our function from our own website on the superbase domain we need the access control allow origin we can set that to either our domain or in this case we can use the wildcard and then we'll need to allow a couple of headers specifically the authorization header the x client info which is what superbase.js sends to identify itself as well as the api key header and so what we can do is we can clone down the the superbase uh repository here and then you go into examples and um edge functions and then we have in here our workspace configuration because we actually have a test client as well so this is just a create react app and then we have our super base functions and because functions are written in dino we kind of want some separate workspaces here so you can see we have our test client which is in the app folder and then our superbase functions which is in superbase functions so now let's actually go ahead and open up with vs code we can open up our etch functions.code workspace so that's what we want to do and then you can see here we have um two different works uh three different workspaces actually we have our project root which just has our workspace file in there i'll read me some super base cli migrations that we can use and then we have our test client which is our um our create react app to call our functions so you can actually look in here in the app.js this is where all the magic happens so we have actually this uh invoke function method here maybe maybe let me make that a little bit bigger um and so this is what we call so this is using the super bass um js super bass client library we can then call super bass functions invoke the name of our function and then we can pass in some body important is we need to stringify our json when we send that to our function and then in our function so here we have our superbase functions we have our shared code like our course headers our superbase client and it looks like vs code has not recognized the workspace so sometimes this can happen and then in that case just close and open it again so what we want to do is for it to recognize it as dino and so now it seems to pick up the the settings correctly from vs code and so we can see here we got our create client imported via dino we got all our stuff um dino here and so our environmentals our super base url and our super base anal key are automatically set both in the local testing environment as well as the deployed environment so you will have your project specific and where environment variables are already set so you can simply use them there and then let's look at our function so if we actually want to call our function from a browser environment we need this specific code here so first of all we need our course headers uh we have seen them in the other file here already so these headers we need to um reply with in a response so we need to check what the browser does with a post request is actually it sends an options request first to check um if everything is set up correctly and then here the browser um no so our function needs to reply to the browser with our course headers in order for then the post request to be sent by the browser and then what we can do is the string if i json that we um send in our app so let's maybe look at our app.js again here so the json string file request json that will be sent to our function here and so we can then use the request.json to get our json back and we can get out the name from it and then again we just spread the course headers into the headers of our response we're just saying also additionally application json here and we're applying that and then also what you want to do is you want to wrap this into a try catch um because if there's any error for example with you know um with destructuring the json or things like that uh then we actually um deserializing the json here then if the function throws an error and we want to make sure that we uh even in the error case reply with the core setters because otherwise in the client in the browser it will look like it was just a course header uh like a course error but we don't see the actual error and so ideally we want to prevent that okay now let's actually go ahead and um so in our app workspace let's actually run our app here so as long as we're in the app sub folder we can say npm install first if you haven't done that so first time you want to do that and then you say npm start and so now we're going to start up our development server and you can see here we have our little superbase edge functions test client um and so what you can see here is uh there is a little switch of all the functions that we have so we have the browser with course select from table it's now important this will only work when you call deployed functions so what you can do is you can specify and dot end file and when the end file is specified with your live project credentials then it will actually make a call to your deployed functions but when you're running this locally it will just call out to localhost and to whatever function is currently being served with the cli and so that's exactly now the next step that we need to do we actually need to serve up our function and so we can do this with superbase serve and then we just say our function name which is browser with course so we do that of course we do need superbase functions surf functions serve that's the actual command and again here when we're testing with the cli we need to make sure that super base start is running so we first say super base start to make sure our docker images are all up and running so we're now starting up the whole um super base stack locally including the database we also have like a studio url and everything so that's that's really really neat and now we can say superbase function serve browser with course and so we're starting up our function and we can see now our function browser with course is up and running so now if we go over here and we specify our body as name world and we invoke our function we can see message hello world so that's exactly our function invocation uh that's great now what we can do is we can look at our other function as well so let's maybe have a look at this one here which is a pretty neat one so we can select from our table so in our functions we can use the super base client as well and what we can also do is we can set the uh auth context for our superbase client so whoever called this function we just get the authorization header so the auth context is forwarded when someone is locked in with uh superbase auth and then we can on our super base client in our function we can set the auth to be the same and then when we do superbase client dot from it does the exactly right thing and so this is called select from table with auth rls so let's maybe actually copy that so i don't have to type it out and so now we say superbase functions serve and then we say select from table with auth our last and so now you can see we're up and running our function is up and running and so now if we invoke our function we see here data is just an empty array and this is because we're not locked in so we can't see any user data now what we can do is we can create a new user we can say just testing and since we're running locally here so this user in in the beginning will not uh exist so we have to sign up a new user so what you can see here is actually we have um an initial migration where we actually set up locally a user's table as well as a trigger so anytime a new user signs up we just populate a new row in our users table and so when we sign up a new user let's sign them up we can now see we're locked in as this tester here and when we now invoke the function again you can see now we get the data back that is exactly our user data so this is the uid for our user and so you can see rls is working as intended if we sign out and invoke the function again you can see now we don't get our user data back anymore okay so this is exactly how how it works how we can test our functions locally if you remember if we now want to deploy our function and then also we can see here we have some console logs in our function here which is console logging out the data and the error and you can see here that's been locked out to the console where we are serving our function locally okay so now let's actually go ahead and in a super base project i have a functions example project here let's go to our settings api from here we can copy things like our url and our add-on key and what we will need is our project id in order to [Music] in order to deploy the function there so we'll say superbase let's not scream at our database we say superbase functions deploy we want the browser with course and then we can specify if we haven't linked our project in the cli we can specify a project reference which is our project reference and now we're bundling up our function and we've got our function deployed and we can actually head over to the dashboard and look at our function here okay and so now we can use the same client to actually invoke that function but in order to do that we need to specify um our environment variable so we need our react app superbase url and our and on key so what we can do is we can just copy this file into dot n and i already have this here so i'm just gonna comment this out so that the functions are available um sorry the environment variables are available and then we probably have to restart our um test client and so now the test client will send the request actually to our um to our actual function so maybe we can also open up the console look at the network requests and so now when we invoke the function we're loading and we're actually going you can see this now uh here we're actually going to our functions.superbase project and we're getting our payload back our payload we're sending name world so that's this here and then we're getting hello world now my name is thor so maybe let's invoke the function with that and now we're getting back hello thor great and so now that the function is deployed we can actually invoke it with you know our javascript client or with kind of any client library that currently supports it so we can actually look in here in the supervis client so we have the official javascript typescript client has functions.js and then as well as the dart flutter library has the function start so here we have the invoke methods already available so what we can actually do is maybe go to a little uh replace and we can do all this with pure html css and javascript maybe let's look at that one i'll link you this one as well and so um we have cdns available to import super base as well so if you have like a pure pure html css javascript project you can do that here and then let's have a little look at our script so we just set our superbase url our superbase annun key and then we can invoke our function we need to await um okay maybe this is a bit messy uh and so let's actually call maybe this function so let's um do this from scratch so we can uh invoke our function with we have our superbase client so we say superbase client josh functions josh invoke and then we pass in the name of our method which was browser with course and then we can pass in a couple of options in our case we just want to pass in the body and remember the body needs to be stringified so let's stringify our json and we'll just gonna say name is thor and so now if we uh run this we can see here uh as our window loads our function is executed and we can see hello thor and no error okay so this is how easily you can test your functions locally deploy them and then actually call them from a browser environment remember you will need to set the course headers for things to work in the browser and that's it let us know in the comments below what other videos you want to see and see you next time bye [Music] [Music] you

Channel: Supabase

Views: 8,757

Keywords:

Id: 7JEzp21Zi-8

Length: 17min 50sec (1070 seconds)

Published: Wed Apr 06 2022