Database Webhooks and Edge Functions

database web hooks are a convenient way of sending real-time data from your database to another system whenever some event occurs in the table now this could be when a new record is inserted or updated or an existing row is deleted now there's already a really nice tutorial for API requests with database webhooks make sure you check that out in the docs but we have now added the capability to basically etch database webhooks to point at your deployed Edge functions and so since we're at GH functions here now let's take a look how we can wire this up through the dashboard so first of all let's create a new Super Bass function So within our supervised project we say Super Bass functions new and let's call it database hyphen webhook so we're creating a function that will be triggered anytime you know there's a new row inserted into our table so let's do that so for our database webhook let's look at this we'll just say hello from database web Hook when we spin up the webhook function and then here so we will get a Json payload so we'll just call this payload and in the first step let's go ahead and console log out our payload let's actually Json stringify that to make it a little bit nicer so our payload and then we can format it like this so it looks nice and is indented so this is the indent option here and then we'll just reply with um just uh 200 okay um and so let's go ahead and deploy this function so uh you remember when we are deploying function superbase functions deploy we say database webhook um and if we don't specify the no verify JWT we will need a valid JWT in the requests authorization header so let's actually do this we can you know kind of use that to lock down our web hook a little bit make sure that not everyone is just able to trigger our webhook and make sure that the request is for example actually coming from our database so now we have our database webhook function deployed um and so we can look at it in our dashboard we have our database webhook method and we can see here we're enforcing JWT verification so let's actually go ahead and find our JWT so we can use our Anon public key this will be a valid JWT for our function and now we go to database and web hooks here and we can create a new hook so let's do that we'll call this edgy Edge hook and then we can select our table here and so something that's really neat is we have the different schemas available so for example we could also trigger this anytime a new user signs up with Super Bass auth so then a new row is added to authored users in the Super Bass off schema and we could trigger a function to then for example send off an email well email is kind of integrated but like for example you know send the user an SMS or you know maybe sync the user for example to HubSpot or something like that on you know an external system so um we could do that but now let's find our public animals so that's our table and we want anytime a new animal is inserted we want to trigger this hook and so now this part is new here we can now select our Super Bass Edge function um to be triggered and we can say we want a post request to be made to our database webhook function um content type application Json and then we'll add our JWT here we will need to prefix it with the bearer keyword curve so we can see this here account what we need we need the bearer um with the uh let's make sure we only have a one Sparrow uh JWT and the name is uh here authorization uh and then that's it we don't need to append any HTTP parameters because we're automatically send the payload from that insert here and so let's go ahead let's create our webhook and so now we can see we have our edgy Edge hook actually let's delete this one here um I uh created that earlier to test some things out so make sure we're not triggering many things at once and now we go to our table and we enter a new uh animal so we can insert a new animal or we'll say a cat so we have a lion let's put in the cat and so now as this is inserted our Edge function is being triggered so database web hook here and we can look at the logs and we can see here let's create our JWT verification worked and we have nicely printed our console log of the payload so this is the payload um maybe we can just put that in here um let's actually create an interface call it webhook payload so we can type kind of our payload a little bit and we let's put this in here so we can say this would be insert update or delete we could also create an enum for this if we wanted to so our table would be a string and now this we can actually generate from our database so let's for now call this uh any and then our schema will there could be different schema as well but let's say we'll just um use public and then our old record will have it as null or you know it could be a database record as well so how can we get the the record type from our database table so that's quite convenient we can actually generate types Super Bass and we can do that quite conveniently here with this npx we don't actually even need to install uh the Super Bass CLI for this so let's copy this out um we have our so we'll want to put this into Super Bass functions and then database web orgs data based it how do we spell database webhooks and then we can just say types Dot typescript and then we'll need our project ID so our project ID we can find in the URL here so that's our project ID and so we can actually run this uh to pull down the types for our database so we can see that here and we have our animals table and so we can import this database interface so we can say you can see here so we're generating our types and then we can import database from the types so we'll just say here [Music] import from types.ts and that is our database there we are and then we can make this actually to be our database record so database has our public schema we can Traverse this we have our tables and then we have our animals and from our animals we want the row so these are the types we can now see we have the types that we get from um you know when a row is being selected and then here as well we can have this either as null we could also make this we could say type um let's say animal records equals this and then we can say this is our animal records and then here as well we have this animal record and so now we have our typescript um types set up we have them auto-generated from our database which is very convenient convenient and what we can say now is we can do the payload as the webhook payload and so now what we can do is if we want to get the animal's name we can say console log payload Dot payload.record Dot um animal animal would be the name of our animal so it's a string so we can give that safe and now let's redeploy our function to various functions deploy and now let's go back and add um another animal to our table so we've got cats now so maybe let's get insert a dog as well for the dog lovers give that a save Okay click correctly and so now if we go back to our database webhook logs we can now see we get our dock there we have it so now database webhooks are integrated with Super Bass Edge functions making it really easy to connect real-time events from your database tables to your Edge functions and with that basically the whole internet thanks for tuning in and see you next time [Music]

Channel: Supabase

Views: 7,159

Keywords:

Id: dJk2wbdLDpE

Length: 12min 13sec (733 seconds)

Published: Thu Mar 30 2023