How to Add a New API and Variables to React Query Builder

[00:00 - 00:13] Now that we have our new API endpoint up and running, we can modify the client to query on the fields from the new data set. In the client code, add a new type to the file, types.ts called data set.

[00:14 - 00:38] So open up types.ts and export a type called data set, which will be sales or unlow code. Save that and we're doing with that file for now.

[00:39 - 01:02] Add a state variable to hold the data set and add a data set selector to the top of the return statement and app.tsx. So here in app.tsx, at the top of our app function, at the bottom of our state variables, we're going to declare another one called data set.

[01:03 - 01:27] With a setter called set data set, that's going to be use state of type data set. And we'll initialize that to be sales.

[01:28 - 01:44] Now we want a data set selector at the top of the page. We can just copy the language selector and change a few things like the value, which will be data set.

[01:45 - 02:17] The on chain chandler will be set data set, which will have to cast as a data set. The options will be sales for the sales data set and unlow code for the unlow code data set.

[02:18 - 02:42] Add a state variable to hold the new query representation, switch the query and on query change props in the query builder component based on the data set selection. So we need a new variable to hold the query representation. We'll call this query UNL and set query UNL.

[02:43 - 03:04] It'll have the same defaults and the same type, rule group type and the object that we've created here. And now in our query builder props, we want to switch this variable depending on the data set.

[03:05 - 03:17] So if data set equals sales, we're going to use query. Otherwise, we'll use query UNL.

[03:18 - 03:41] And then on query change, we'll do a similar thing. Data set equals sales, we'll use set query, otherwise set query UNL.

[03:42 - 04:01] In fields.ts, import the data set type and convert the exported object to a record with keys of type data set and values of type field array. The sales field should be under the sales key, add the UNL under the UNL key.

[04:02 - 04:26] Use the input type number for the ID, latitude and longitude fields and use date for the date field. Okay, let's first convert this to a record with type data set for the keys and field array for the values.

[04:27 - 04:43] And we'll wrap this in curly braces. Make that the sales key.

[04:44 - 04:59] And down at the end, the UNL code key, I've already got typed up here. So I'm just going to copy that.

[05:00 - 05:16] You can get this code from the transcript. Paste that in and format it.

[05:17 - 05:27] We use the value editor type select for the status field. So now we need to assign the status values variable and also set up the corresponding ref data.

[05:28 - 05:41] We've also got this typed up already. So it's a status values const variable. That's an array of name and label objects.

[05:42 - 05:56] And we'll just paste that in. Down here at the bottom of our declarations.

[05:57 - 06:10] And save that. Now notice that our status values ref data is a record with keys of type string and values of type string.

[06:11 - 06:31] And it starts out as an empty object. And just like we did with the priorities variable, we loop through status values. And for each of those, we set the status values ref data property of p.name to p.label.

[06:32 - 06:38] Okay. Notice we use the value editor type check box and set the default value to true for the Boolean fields.

[06:39 - 07:00] Now we'll define the cell renderer for those fields, which we'll call check mark cell renderer. And I also have that typed up because it has a Unicode value that I didn't want to have to look up during this video.

[07:01 - 07:23] So check mark cell renderer has the same format as our date cell renderer takes an object with a value of the object as type I cell renderer perams, which we got from a GGrid community. And if we have a value, or if it's truthy, then we show a check mark. Otherwise , we show nothing, an empty string.

[07:24 - 07:32] And save that. In the next lesson, we'll configure the grid columns and fetch data from the new API.