What are the best practices for storing and accessing data in an Angular 9 application to ensure it can be

Question

What are the best practices for storing and accessing data in an Angular 9 application to ensure it can be

I have developed an angular application where the list of categories is loaded on the home page. To achieve this, I am calling the getCategories() function on ngOnInit, so every time the home page is visited, all categories are fetched from the database and displayed. While this functionality works correctly, a problem arises when a user navigates to a specific category page from the home page and then returns back to the home page. In such instances, the app fetches all categories from the database and renders them again on the home page. As a result, the app ends up making multiple http requests every time the home page is revisited.

Hence, my query is whether there exists a technique or method to eliminate these redundant http Get calls. Is there a way to store the retrieved data once the home page is initially loaded, perhaps in a local scope, so that whenever the user returns to the home page, the data can be fetched from this stored location rather than querying the database again?

angular typescript

Answer 1

Answer №1

To ensure data preservation when navigating away from components, it's important to store the data in a more globally accessible manner. Utilizing Angular's root-provided services is the recommended approach. An example implementation could be as follows:

@Injectable({providedIn: 'root'})
export class MyRequestService {
   private myRequest?:Observable<MyResponseType>;
   
   constructor(private httpClient:HttpClient) {}

   public doRequest():Observable<MyResponseType> {
      if (!this.myRequest) {
          this.myRequest = this.httpClient.get('http://someurl.de').pipe(
             shareReplay(1)
          )
      }
      return this.myRequest;
   }
}

Simply call the doRequest method in your component instead of handling the request directly.

@Component({ /*...*/ })
export class MyComponent implements OnInit {
   public myData?:MyResponseType;

   constructor(private myRequestService:MyRequestService) {}

   public ngOnInit():void {
      this.myRequestService.doRequest()
         .subscribe(myData => this.myData = myData);
   }
}

Answer 2

To ensure data preservation when navigating away from components, it's important to store the data in a more globally accessible manner. Utilizing Angular's root-provided services is the recommended approach. An example implementation could be as follows:

@Injectable({providedIn: 'root'})
export class MyRequestService {
   private myRequest?:Observable<MyResponseType>;
   
   constructor(private httpClient:HttpClient) {}

   public doRequest():Observable<MyResponseType> {
      if (!this.myRequest) {
          this.myRequest = this.httpClient.get('http://someurl.de').pipe(
             shareReplay(1)
          )
      }
      return this.myRequest;
   }
}

Simply call the doRequest method in your component instead of handling the request directly.

@Component({ /*...*/ })
export class MyComponent implements OnInit {
   public myData?:MyResponseType;

   constructor(private myRequestService:MyRequestService) {}

   public ngOnInit():void {
      this.myRequestService.doRequest()
         .subscribe(myData => this.myData = myData);
   }
}

What are the best practices for storing and accessing data in an Angular 9 application to ensure it can be

Answer №1

Similar questions

Is tsconfig.json Utilized by Gatsby When Using Typescript?

Creating Unique Local Types without Compatibility Issues in TypeScript

Styling Angular parent and child components: Best practices for consistent design

Employing Multer and Express in conjunction with TypeScript

Enforcing type changes in TypeScript

Tips for dynamically calling a property member of a function type in Typescript

What could be causing the availability of a response in a service, but showing as undefined in the component?

Exploring the functionality of Kendo Grid within an Angular application

Is it feasible to create type-safe callbacks in the style of Node.js?

Is there a problem with the npm installation due to the absence of Xcode or CLT version?

Can you identify the reason for the hydration issue in my next.js project?

What are the steps for setting up an Angular 2 library project?

I am encountering an issue where I am unable to locate the module 'http' or its associated type declarations when attempting to include ytdl-core

Changing the background color of .pane and .view elements in an Ionic web application using JavaScript

How can I prevent IE10/IE11 from displaying the open or save prompt?

Strings and String enums do not align with each other

How to import an HTML file using TypeScript

Common problems encountered post Typescript compilation

Angular - Jest can manage the importing of the main entry point

"Encountering an unexpected error when Dockerizing an Angular App on Win10 Professional: EXPAND-ARCHIVE instruction not