Executing Requests in App Builder

Sebastian Scholl (00:03)
Hi, everyone. This is Sebastian from 8base. Today, we're going to be looking at using requests in the app builder to actually query data from a resource or data source and display that on the screen.

Sebastian Scholl (00:13)
In an earlier video, we looked at setting up a resource, which is essentially saying, setting up the API client to which you send requests. That was pretty simple. We went to our Resources, and we selected the 8base Workspace that we wanted to connect to. Then we went through some examples of just saying, "Hey, this is how you connect or create a resource for either a REST API or another GraphQL API."

Sebastian Scholl (00:33)
However, if you need to go back and reference that video, in this case, we have a certain workspace connected and configured so we can use this resource, which is our Sandbox Workspace. Inside this workspace, I am jumping to the backend console here.

Sebastian Scholl (00:47)
Essentially, we have two tables—Restaurants and Reviews. There's many restaurants in our database, or if there's 20 restaurants in our database, of which there's many reviews that belong to those different restaurants. That's the simple data model that we're playing with here.

Sebastian Scholl (01:00)
However, what we're going to look at is now how do we actually send requests to this data source or this resource, and then access the data that's returned, and then display on the screen. Here, what we're going to do is we're going to go back, and we can do go to any page, essentially, and we can click on the Requests pane.

Sebastian Scholl (01:17)
Essentially, when creating a new request, we have the choice of saying, whether or not this is a global or local request. That's essentially a name spacing. For example, if I create a request that's global, that means that I can then, when working on any page, reference, and use, and execute that request, where if I say it's local, it's only going to show up on the page on which I create it.

Sebastian Scholl (01:37)
In this case, we are on our home page. Here, I'm just going to say a Local Request, so it will only show up on this page. When we open our Request pane, if we switch to a different page, it wouldn't be there.

Sebastian Scholl (01:50)
I'm going to go ahead and click Create. Here, it allows us to select which resource. We only have one resource configured, which is our Sandbox Workspace. Then I can say, based on the fact that the 8base API is a GraphQL API, I can say what type of GraphQL operation I want to submit a query or mutation.

Sebastian Scholl (02:09)
I'm just going to jump into the API Explorer really quickly to craft a query. Essentially here, I'm going to say that we want to run a query, where we want a list of all the restaurants in our database. We want to know how many restaurants we have. Then for each one of those restaurants returned, we want the ID, we want the name, and we want the location.

Sebastian Scholl (02:32)
Then what we also want is, let's just say, that we want the reviews. However, we only want an aggregate of how many reviews there are. For location, that is a geo field, so we want the coordinates of that. We can run the query here and see that we're getting back all that data. Cool.

Sebastian Scholl (02:48)
I'm going to take this query, and copy it, and pull it into app builder. I'm just going to delete all the comments that were inside the input and add the query right in there. One thing that we have to do is we would have to authenticate this. Instead of do handling with authentication right now, I'm just go back to our workspace and make sure that this is a public API. We're acting like this is a free API to use.

Sebastian Scholl (03:15)
I can go to my Roles, go to my Guest Role, and then say that a guest, which essentially an unauthenticated user, can read all the restaurants and read all the reviews. They have no write privileges, but they have read privileges. Cool.

Sebastian Scholl (03:33)
When I go, and I save, and execute that request, we can see that it's getting back all the data that we'd expect, so it's successfully made that API call. It's important to note is that if I go to my State Management and I go to Local, we can see that there is a request. Let's actually rename it so that it's a little bit clearer. Here I'm going to go and rename the request as Restaurant List Query. Once again, save and run. Cool.

Sebastian Scholl (04:11)
If I go back to my State, Local, I can see that under my Request section, I have my Restaurant List Query. If I open, it's giving me all the information back about this request, which has been run. In the response where there's data, we have our restaurant's list, which we have our items and the count, and then all the different restaurants listings here. Our whole response is stored in state there.

Sebastian Scholl (04:36)
Because it's in state, that now means that we can access it from Components, and we can actually use it inside of our application. What I'm going to do really quickly is copy this down at the Items tab because that's actually our array of restaurant data, this little clip, or when I click this little clipboard icon. Essentially what that is doing is that's copying the state accessor to reference that data. We'll see what that means in just a minute.

Sebastian Scholl (05:04)
Let's look at a component such as a List. We're going to put a list here, and then we're look at the List Properties. What we're going to say is we're going to say that "Okay, well, we have our list items," or actually, no, this isn't going to work on a list. I take it back. I'm going to delete the list.

Sebastian Scholl (05:26)
I'm going to go get a looper, drop the looper on the page. Since the looper is a container, which can take an array of data, and then allow you, essentially, you create the template inside the loop, and then reference each item that you want iterated over, and we'll look at what that means. I'm just going to call this Component Looper.

Sebastian Scholl (05:49)
Inside the looper, I'm going to give it the loop data. Essentially, the data is going to be that array of items. I'm going to do [inaudible 00:05:58] syntax, which just means that an expression that needs to be evaluated. I'm going to paste in that accessor, which is Restaurant Lis Query, data, restaurant list, items. Then I'm going to say that the item name is called Item, and we'll see where that is, but we could call it Restaurant. We could call it whatever we wanted.

Sebastian Scholl (06:16)
I'm going to go back to our Components, and I'm going to select a card. I'm going to drop the card in there, and we see that it just populated 20 cards. It's because we have 20 items in that list, and they iterated over each one. I'm just going to call this Card Template.

Sebastian Scholl (06:36)
In here, I'm just going to do a quick couple styling things. I'm going to say that the width of every card is 250 pixels, the height is 250 pixels, so they're nice and square. Then we're just going to play with some of these options really quickly so that they would separate. There we go.

Sebastian Scholl (07:03)
Let's say that the top margin is 10 pixels, so there's a little spacing between them, and then we're going to use the custom property raise so that it has that little bit of shadow behind them. Cool. Let's just leave it like that for now since we are not doing a styling tutorial. Cool.

Sebastian Scholl (07:22)
Inside the card, we want to start actually changing some of this information. If I look at the properties of the card, I see that we want to change the header, and we actually want to use the restaurant name as the header of the card. What I can do now is I can, once again, give it an expression and say, "Okay, well, item.name." The item is now each restaurant that we're iterating over and then the name is the key on that data object. You can see that each restaurant's name is being referenced here inside.

Sebastian Scholl (07:54)
Then we're going to do the same thing for the sub-header, but then give it the ID, so we can see what each ID of each restaurant is. Cool. We did that, and now that's working successfully.

Sebastian Scholl (08:04)
The other thing that we wanted to do was we have, I think, location in there, as well as the number of reviews. Let's just take a text field and drop it inside there. We can play with this text field, essentially. We're going to call it Card Template Text.

Sebastian Scholl (08:28)
Inside of here, what I can now do is I can now actually do a combination of syntax, or [inaudible 00:08:35] syntax and string. We can play with that. Let's just say the restaurant located at item.location. I think then we have co-word in it. Cool.

Sebastian Scholl (08:58)
That is helpful at all to the user, but you get the idea if there's different ways you could play with that. Then we're going to say has... Once again, I know what my object is here. However, if I didn't, I could go back to my State. I could open up the request. I could go to the data and drill into it all the way to where we need to go, which is okay. I actually want the number of reviews on any item.

Sebastian Scholl (09:31)
Here is the count. What we want is we want the item.reviews.count. I can paste that in there. It's going to give me that whole thing, but I'm going to clip off the beginning and change that named Items. Cool. Close that. What do we got? We have some type of syntax error.

Sebastian Scholl (09:58)
Let's see if we can solve it. Oh, Item. Excuse me. There we go. Cool. Island Burger is located at that lat.long and has two reviews, and so on and so forth. Cool.

Sebastian Scholl (10:18)
I hope that this video gave you some good ideas of how you can create requests and execute those against your resources. Then when you do, where that data actually gets stored and how you reference that data when actually wanting to utilize and display it inside your page or on the page.

Sebastian Scholl (10:34)
Happy developing. Hope that this helps. In future videos, we'll be going over new app builder concepts. Take care.

‍