Initialize the NGRX Signal Store state from external APIs using Promises or Async/Await

[00:00] N g r x signal store supports not only the RxJS interop, which includes the RX method and everything RxJS related, but also it supports the async await API, which allows us to use, well, async functions and promise based functions. So let's implement [00:20] the load employees alternative, which is going to rely on the async await. And for this reason, this is going to be an async function, which is going to include no parameters. And what we're going to do here is, first, we could write bare [00:40] async code here within this employee store async method, but we can keep things clean and implement the method within the service and then inject the service. So we're going to implement the alternative to get employees. So since we're going to use the fetch API, let's [01:00] just call this function fetch employees. And since we are basing on the async await API, let's make this function async as well. And let's copy a little bit of parameters. So here we have criteria in case we wanted to do some filtering, sorting, etcetera. So this is employee criteria. And [01:19] let's start coding. So const response equals. And here we go with the fetch, which is going to use what is the URL over here, API URL slash employees. So this is what we need. And now fetch is returning the promise of a response, so we want to await it [01:40] right here. And at the very end, what we want to return is simply the response dot JSON. And TypeScript has no means to figure out what is the type being returned from here, from this call, the same way as with the HTTP client dot get [02:00] dot post or dot any other HTTP methods. We need to specify what is the expected response type. So here we have the generic to specify that, but this is in no way anyhow more type safe than what we're going to do here, which is simply a promise of the employees array. Now our [02:20] get employees is using the private get page method which is using the underlying create HTTP params which supports which page of the data are we downloading from the server, whether is the 1st page of the results, the 2nd page, etcetera, and what is simply the page size. So whether it's [02:40] going to be 50 elements per page, 20 elements per page, etcetera. So here, we would like to redo the very same thing in async await approach. So we're going to define what the query string is going to be. So here we would basically define that there would be a [03:00] query over here. And let's start defining a query. And the best way to define a query in modern JavaScript is to use the new URL search params. And the search params is going to be, of course, all the criteria that we have. The same criteria [03:20] which we have over here, employee criteria. Right now, we have some nationalities of the employees or office, whatever that is. And we will also support the parameters of this specific API. So this very specific API is using the underscore limit, which is going to be [03:40] the page size of our parameters. So let's also add the page size parameter page size, which is going to default to 50. And let's also pass the page is which is going to default to 1. So let's put the page size, and let's just make it to [04:00] string just to make things clean. And also page which is going to be the page dot to string. And what we need to do, like query, is an object right now. So let's just dump it into a string because that's the whole point of this constructor being used so that we [04:20] have a string over here. So our method is done. This fetch employees. So let's go back to our employee store. Now with this with method section, we are having all the HTTP, and we have already injected the employees HTTP service. So [04:40] what we want to do is to run the employees HTTP, which is going to fetch employees. Now remember that we are inside the async await API. So what we want to do is to await this call. And when we do await the call, [04:59] what we get in response is basically the items itself. So when we get the items, what we can do is to run the store dot set items with, of course, the items. But the problem is that there could be things that are going wrong. So for [05:19] this reason, what we need to do is to check whether there was an error or whether there was no error so far. So what we need to do is to wrap this call with a try catch. So let's also add the try catch and put the error [05:39] statement over here. And before we walk into the try catch, the same as we did with load and place, there was also a set loading. So we need to walk into the loading state of our state machine, of our simple state machine. So store dot set [05:59] loading. Now we are inside the try. So if things go well, we would have a success state, the set items call. And now if things go wrong, what we want to do is to do the store dot set error and try to set what the error is. [06:19] Now we do get an error since things are incompatible. And if we go down very, very, very deep, we will get the error saying that argument of type unknown is not assignable to type error. So what the error is expecting is that this would be actually an error, but what the [06:39] catch clause is returning is unknown. So for this reason, if there was any case in which this thing would not be an error, like it's not really probable, but technically TypeScript requires us to take care about that is to basically make a small if statement. If this was [06:59] not an error, basically, wrap it with an error. So let's create let error equals and here we go. This is our condition. So is error an instance of error? If it is, then please just pass through [07:18] whatever was the error. And now if it was not, then what we can do is basically wrap it into a new instance of the error object saying that, hey, some unknown error occurred. And using the new specification of JavaScript, ECMAScript, we can say that the [07:38] cause of the original thing was actually whatever was passed over here. And here, we're absolutely sure that either this has already been an error, and if for any reason not, we can just wrap it with an error. And this is what we've got right here. So the only thing that we [07:58] need to do is to walk into that with hooks, and let's replace the load employees with the load employees async await. And let's see that everything is up and running. NGRX signal store supports async await and promise based APIs.