Connecting an 8base Frontend to a Backend using Resources

Sebastian Scholl (00:02)
Hey, everyone, this is Sebastian from 8base. Today, we're going to be looking at how you can connect an 8base frontend with a backend using Resources. Here I am inside an App Builder project. Essentially, what we want to do is we want to take one of our existing 8base backends and use that as a data source to the frontend. The way we're going to do that is by creating a resource that allows us to connect those two.

Sebastian Scholl (00:24)
To create a resource, I'm going to go down here to my Resources tab, and it's going to show me all the different 8base backends that I have available. However, know that you can also create a resource for any REST API or GraphQL API. Really, you can think of a resource as an API client. Because essentially, it's the client that you're going to use when executing requests.

Sebastian Scholl (00:46)
In this case, I'm going to go find my Sandbox Workspace, which is right here, and I'm going to click on that. When integrating an 8base backend to the frontend, super straightforward, it saves most of the configuration for you.

Sebastian Scholl (01:02)
However, if I now jump into this resource, I can see that that's the name of the workspace. This is the idea of the workspace I'm connecting to. Then if I'm using things like CI/CD, I can specify the environment of that workspace, which is relevant to my project. This is all saved, and we're good.

Sebastian Scholl (01:19)
That is actually as easy it is to set up a resource with an 8base backend. Let's just look really quickly at some of the forms for a GraphQL API or REST API. Starting with REST API, essentially, what I'd be able to do is say, "Here's my REST API name." For example, let's say, that would be Twilio API, and I am writing pseudocode here.

Sebastian Scholl (01:41)
However, let's just say that the URL for Twilio API was api.twilio, oh, excuse me, twilio—there we go—.com/v1. Essentially, we're saying this is the base URL, because when going to write any REST API request, that's where I'd actually say, "Well, here's the endpoint," such as /SMS, and I do a post request, something along those lines.

Sebastian Scholl (02:09)
If I wanted to, I could specify any default URL parameters that would be included with every request, as well as any default headers. This would be valuable if you have some type of authentication credential that you need to supply as well. However, I could save that. Now that resource is created as well.

Sebastian Scholl (02:27)
Finally, with a GraphQL API, essentially, give it the name such as Sendgrid and give it the GraphQL endpoint, which we could imagine being https// sendgrid, let's just say, .api.sendgrid.com/graphql. Then once again, any default headers that you want that, you save it, and then you have that resource created.

Sebastian Scholl (02:57)
We're not going to execute requests in this video. This was just more about showing you how to set a resource. But let's look really quickly on where you actually reference these resources when writing requests.

Sebastian Scholl (03:08)
For example, now on any page or wherever my application, I can access the Requests tab, which is again open up my Request pane. Here, if I wanted to create a new request, essentially, I can say, "Okay, well, I'm going to write the new request, but I want to specify which resource this is going to." We can see I set up my three different API clients here, whether I wanted to connect to my 8base backend, this Twilio API, or the Sendgrid API.

Sebastian Scholl (03:34)
Then it's going to show me the relevant form to fill out for that request. In this case, it gives me an input to specify a GraphQL query or mutation, as well as any variables that I want to pass with this specific request, such as form data, any headers for this specific request, as well as things for transforming the response that you get back, or executing certain callback functions on either whether the request was successfully completed, or if there was an error on the request.

Sebastian Scholl (04:00)
This form will obviously change dynamically if it is a REST request. For example, in this scenario, we now have the example of saying, "Okay, well, what type of http verb you want to use, what's the URL endpoint that you want to use, and then the other ones that are relevant to that request type as well."

Sebastian Scholl (04:19)
I hope that this video helped you gain a basic understanding of what purposes resources can be used for, as well as just some of the steps you go through for setting them up. In subsequent videos, we'll look at actually executing requests inside of App Builder as well as some of the other core concepts that you should be familiar with. Happy developing and see you in future episodes.

‍