Using Resolver for pre-fetching data in Angular

Angular router package already has all the required functionality which a generic Single Page Application needs. In this article, I would like to discuss Resolver which is part of Angular Router.
There are a few use cases where our page needs the data each time the routes get loaded. It could be statically (passing hardcoded or fixed data )or dynamically (loading data from the server). Along with this, we also want that if the data is not found for that specific page then we don't want to visit it and get navigated to some other route or page. Typically use case would be loading a page that contains users' data but let's say no data is found for that specific user then we want to navigate the application to the edit the details page.
So, what do we need here to achieve the desired specific flow? Of course, we need a service that can help us to connect with the server and fetch the data while the navigation to that route is in process. Here comes Resolver in the picture. We want our data to be prepared for rendering before we are routed to that page.
A Resolver is a guard which is indeed a service that does the job of pre-fetching the requested data while the user is navigating from one route to another one.
How to use Resolver?
As we know, behind the scene, Resolver is a service so let's create a file for it. We would name it as "post-resolver.service.ts"
insert
Now, this is a simple and plain class as we declare in typescript. Now to have this class as a resolver, this class should implement an interface called Resolve which is a generic type and will wrap a type of data it needs to be fetched from the server. Well, we could give it type "any" but let's be a little specific and provide it a simple type.
insert
If you see in the above screenshot, we are seeing an error indicating over the Class name. It is because the Class has implemented an interface Resolve which is nothing but a contract made that this following class has to implement a method resolve which is provided by Resolve interface. So let's do that first.
insert
Okay, seems like we are getting an error indication over every next step. It is not because we are on the wrong path. It is due to the incomplete details the following method have at this point in time.
Now, this resolve method is demanding a few parameters such as ActivatedRouteSnapshot and RouterStateSnapshot which should receive on the fly by Angular and it should return some values which may be wrapped with Observable, Promise, or may return just a type of value itself.
insert
The moment we define the return type for any method, the editor shows us an error as the method demands to return the value with the same return type as we defined with method declaration.
So let's assume we have a HttpService having getPost() method responsible for fetching data over an API. So the next step would be injecting that service inside our server PostResolver and calling that method.
Now with this, we are ready to use getPost() in our resolver service. The one thing we need to keep in our mind is that we are trying to inject one service into another service as we already know now that Resolver is a kind of service too. So now we also need to add @Injectable() decorator in our resolver class to inform Angular about this behavior.
At this stage, our resolver service is ready but to see this in action, we have to perform a few steps.
Register the PostResolver service in the Providers array so Angular could provide it at the time of need.
insert
We don't need to register our another HttpService in providers array since we are using an alternate way @Injectable({providedIn: ‘root’}) which will inject our service as singleton over the root level same as adding in providers:[] or root module.
Register this PostResolver over the specific route we want to have our data loaded in advance and accessed later.
Let's see our implementation in action, Loading the data in advance
Note: The key we used while assigning PostResolver in the routes should be the same as the key we are using here to access the data in the Post Component or else it won’t work.
insert
Thanks for reading this article. Please let me know your suggestions in the comment box.

People Reaction : 0

Rohit Sharma
Name : Email : Website :
© 2021 WriteSomeCode. All Right Reserved. A Rohit Sharma Blog. Creative Commons License licensed under a Creative Commons Attribution 4.0 International License