Description Transcript
Learn how to use queries in Retool to connect your data, power your UI, and build dynamic, data-driven apps with SQL, JavaScript, and event handlers.
Queries are the engine of your applications. Without them, your UI components would simply show empty placeholder data. So join our Developer Advocate Angelik Laboy Torres for a tutorial that demonstrates how queries in Retool bridge your data and UI.
You'll also learn how to:
Build SQL and JS queries
Organize them with folders
Trigger actions that make your apps more powerful
Organizing, Creating, and Connecting Queries in Retool
00:00 What are queries?
00:25 How to organize queries with folders
01:36 How to create your first SQL query in Retool
04:11 How to connect queries to components
06:43 Event handlers explained
07:37 How to set up Success & Failure handlers
09:09 What we learned
Useful Resources:
Read more 0:02 Welcome back everybody. My name is Angelik Laboy Torres. 0:05 I'm a developer advocate here at Retool and today I'll be showing you how to connect and 0:10 query data. Queries are executable blocks of code that patch, manipulate and transform 0:16 data. I would think of them as an engine to your app. Without queries, your UI components 0:22 would just show empty placeholder data. 0:28 Before we dive in into creating our first query, 0:30 I would like to talk about organization: 0:33 a crucial best practice that will save you time 0:36 and a lot of headaches at the end of the day. 0:38 So you see, as your Retool apps start growing more complex, 0:41 you can start having dozens of queries 0:43 and finding them can take you forever. 0:46 But for that, that's why we use holders. 0:48 So I'll go over here into my code tab 0:51 And then from there, you will see the query panels. 0:54 If there's a query that is at the global level, then put it in so. 0:58 But if it's page specific, you can go over here and toggle between them. 1:02 Then I would say like specify it in there. 1:04 Now, how do you make them? 1:06 I'll go into the plus icon and then under utilities, folder. 1:10 And I can do something like, I don't know, APIs. 1:15 And then if it's something more global, right, you can be over here, folder. 1:20 And then I can do this and then... 1:22 Scripts. 1:24 At the end of the day, what I recommend is to divide them either by functionality, so stuff like API, 1:30 scripts, authentication, or you can do something like features, so users, orders, products, and many more. 1:39 Let's start with the most common type, which is the SQL queries. 1:42 For that reason, let's go into the code tab. 1:44 I like it page specific, and I'll click on the plus icon. 1:47 under data you will see a resource query. Click there and then for this example 1:51 you have many options. I'm using a Retool database so keep that in mind I'm using this one and then you can see 1:57 there's two modes here there's the SQL mode which is for reading data where you write raw 2:02 SQL statements and then you have the GUI mode which is just for those more comfortable using it for 2:07 input same results okay so let's start with the SQL mode. And then I'll do a simple query like SELECT 2:15 all from products. The products that I'm referring to here is this table which actually shows just 2:24 product name, price, category. Cool. And then I'll do where price is greater than 100. I'll save here, 2:34 run this in a second, I'm renaming greater than and then I'll run this. Okay. What you can see down 2:41 below is actually just the output section and this is the data that you have retrieved. For now, 2:47 I have the beach ball and the motorcycle, which is correct actually. So we have two products 2:51 showing up. What I will do now is actually showing you another way with just the GUI mode. So let's 2:55 create another one. Let's go over here, this icon, research query, Retool database again, 3:01 and then I'll do GUI. From there, I'm going to actually select the same tables, products, 3:07 and then you have the actions that you have like stuff like insert update and existing record 3:11 delete a record, bulk, and no any type of action like insert update etc. I'll do insert a record 3:19 and then the key value appears since we selected the table it actually takes the columns that it has 3:25 and for now i just add a hammer and then i'll do a class and then i'll do this as a prize well 3:33 must not be realistic but 350 just to show that it works on the other side. 3:37 Category tool and then cool. I'll name this AddingtoTable. I'll save this, I'll run this. 3:49 Likewise the output over here and then now I've got to go into the GreaterThan and I run this again. 3:55 There we have it. So the great thing here is that Retool at the end of the day helps you with the 4:01 proper SQL specifically while we're talking about the GUI over here, right? The proper SQL 4:06 behind the scenes so you don't really have to worry about writing complex SQL. 4:13 Now let's add this data to a UI. For that, we'll go into the add UI section and I'll put a table 4:20 over here that would open up the inspector window and then actually you can see that it has already 4:25 detected a query. This sometimes happens otherwise it just selects you know placeholder data but 4:30 But in this case, I don't want this one. 4:32 And I'll turn this off because I can actually have a drop down 4:36 of all the queries that I have. 4:37 So just to emphasize, 4:39 the two queries have creator's are these. 4:41 And for that, I want to do the greater than. 4:43 Okay. 4:45 And there you go. 4:46 Now all that's left to do is really just update it 4:49 and make it pretty, make this into a tag 4:52 or leave it however you want. 4:53 I mean, we can do that very quickly. 4:55 Let's go category. 4:56 We can do this one as a tag. 5:00 and that, it's fine. 5:02 Self-adjust, so it starts looking better and better. 5:05 And this is really the power of queries. 5:07 They transform static components 5:09 into dynamic data-driven interfaces. 5:15 So sometimes you might need something more 5:17 than just database queries. 5:18 So for that reason, we create JavaScript queries. 5:21 And that helps you really with the custom logic 5:24 and the data transformation. 5:26 So let's do that. 5:27 I'll go over here again, 5:28 and I'll click on the plus icon. 5:30 And you might have seen it already actually. 5:32 If you see over here it says JavaScript 5:34 and then just click on the query. 5:36 Okay, so here you can write custom JavaScript 5:40 to transform data, control app behavior, 5:43 and at the same time implement complex business logics. 5:46 So actually before I actually write 5:48 what my JavaScript is gonna be, 5:50 I'm gonna create another query. 5:52 This one is gonna be just to select 5:54 all the information from the table. 5:56 So research query, read the database, 5:59 and then just exactly like that select all products. 6:05 Cool. 6:08 I'll read this and then for the eyes, there you go. 6:11 Both. 6:12 The reason why I don't want to use the greater than 6:14 is because it only has the output of the two, 6:18 the three now that are greater than a hundred. 6:21 So it's already segment thing. 6:23 Now what I want to do with this one, 6:24 I've already written it out. 6:26 It's actually just another version of the get prices that are greater than $500. 6:32 But what I'm trying to show you here really is that JavaScript queries are perfect when you need to manipulate data before displaying it or creating any sort of complex workflows. 6:46 Now, to make queries really powerful, we need to add event handlers. 6:50 These allow you to chain actions together. 6:52 So for example, you can have a button and that's when the button put it there. 6:56 And then you can add an event and alert that triggers a query to update the database. 7:00 And let's do that. 7:01 Right. 7:02 Go over here, the button, and then that opens up the inspector window. 7:06 I can rename this, uh, refresh. 7:09 And then over here, you will see the event handlers, right? 7:12 Each component has the ability to not only attach one, but multiple of them. 7:16 And they can even trigger one another. 7:18 So go over here in the plus icon and this could just be the greater than and then trigger it right. 7:24 The reason B is because this only it shows the greater than information so then when I click it over here 7:30 you can see that the tape was even refreshing and at the bottom we get a notification for that. 7:34 So again really powerful. 7:40 One of the amazing things about queries and I have a taste there already 7:43 is that you have the ability to have success and failure 7:48 handlers within the queries itself. 7:50 So let's see how that looks. 7:51 Okay. 7:51 So over here in the code tab, 7:54 and then let's do it with GreaterThan. 7:55 And then from there, you will see event handlers. 7:58 There you have the success and failure area. 8:01 So let's make one. 8:02 Let's do success. 8:03 And then I'll do this action as a show notification. 8:06 The title is gonna be data refresh success fully. 8:11 and then the try is gonna be a success. 8:14 Great. 8:15 The failure is gonna be also a show notification. 8:19 This is gonna be fail to refresh data. 8:23 And then the description is gonna be, 8:25 please try again. 8:28 Let's do an error. 8:30 It could be a warning, but let's do an error. 8:34 And then now let's run this. 8:36 And as you can see, the clear ran. 8:38 and then also the success of that event handler. 8:43 Now, the good thing here is that you can also 8:46 chain actions together, 8:47 and this way you can also keep your control 8:51 of queries very synchronized. 8:53 I'll click here and then I can do the career one, 8:55 which is actually the JavaScript transformation. 8:58 And I'll trigger over here. 8:59 So I can save, I can run this. 9:03 Boom, boom. 9:04 And then over here, boom, Iran, giving me the information. 9:08 So wow. 9:09 Okay, now you understand how queries work as a bridge 9:12 between your UI and your data. 9:14 And whether it is for SQLs in order to fetch stuff 9:18 in your database, whether it is to transform 9:20 or manipulate with the JavaScripts, 9:22 or whether you wanna do a bit and large 9:24 in order to chain actions together 9:26 or make your workflows more active, 9:28 the queries at the end of the day are there 9:30 to make your Retool app more functional and dynamic. 9:33 So hope you come back next time. 9:36 And we're gonna be talking about workflows and automations, 9:39 so I'll see you then. 9:40 [MUSIC]
