Modern Data Fetching Techniques in Angular

Modern Data Fetching Techniques in Angular

Transcript

1. Dhananjay Kumar Founder, nomadcoder | ng-India| AI-India Modern Data Fetching Techniques in Angular
3. All signal APIs are synchronous signal computed input linkedSignal Async Data resource resource incorporates async data in signal-based code and reads that synchronously
6. resource • Fetch data from the API • Update data locally • Asynchronously load local resource • It should not be used for mutation such as POST operations
9. resource returns a WritableResource with read only signal- based properties: resource value status isLoading snapshot error hasValue()- boolean function
10. resource
11. resource status idle – The resource has no valid request and will not perform any loading. Here, value() is undefined. loading – The resource is currently loading a new value. Here, value() is undefined. reloading – The resource is currently reloading the new value. Here, value() is the previously fetched value. error – The resource failed to load the value. Here, value() is undefined. resolved – The resource has completed loading. Here, value() is returned from the loader. local – The resource value was set locally by set() or update().
13. resource
15. params = undefined params = new value
16. resource params it is tracked when signal used inside changes, angular executes the loader loader it is not tracked signal used inside change, angular does not execute the loader
17. resource Angular does not track the signals used inside the loader. So, if a signal changed inside loader, Angular does not track this change and does not run the loader Angular tracks the signals used inside the params. So, if a signal changes in the params, Angular tracks this change and reruns the loader to fetch the updated data
18. params are tracked
19. loaders are not tracked
20. Multiple requests Whenever the productId changes, and if there is an overlap request, the resource API performs these tasks: • It reloads data by running the loader • It does not cancel the ongoing request but ignores its result • It only returns the result of the last request To cancel the previous, ongoing request when the productId changes, we have to use the abortSignal.
21. httpResource • It is built on top of the resource primitive. • It uses HttpClient as its loader. • It serves as an abstraction for @angular/common/http. • It makes HTTP requests through Angular’s HTTP stack. • It works with interceptors.
22. httpResource
23. httpResource
24. httpResource • httpResource creates a resource that loads data with an HTTP GET • The request updates when signal based url changes • It uses HttpClient, so you get interceptors, testing support, and the rest of the HttpClient stack • Responses are treated as JSON by default. But can be used with other parser such as httpResource.text()
25. httpResource •It is eager • It triggers a request as soon as it is defined httpClient •It is lazy • It only triggers a request when the returned observable is subscribed to
26. httpResource • Each new request made with the httpResource API automatically cancels the previous one. • Because of this behaviour, it is not suitable for mutations and should be used only for data fetching.
27. Signal in URL
28. Works with Interceptors
29. Other message shape • httpResource(…) • httpResource.text() • httpResource.blob() • httpResource.arrayBuffer()
30. Cache • default • force-cache • no-cache • no-store • reload • only-if-cached
31. Cache
32. Request parameters • url • method • body • params • headers • context • reportProgress • withCredentials • keepalive • cache • priority • referrer • timeout • transferCache
33. Thank YOU • dhananjay@nomadcoder.ai • Training • Consulting • Speaking • MVP development • Product Development • API-AGENTS-AGNULAR