Share
Embed
Slide 1
Slide 1 text
Dhananjay Kumar
Founder, nomadcoder | ng-India| AI-India
Modern Data
Fetching
Techniques in
Angular
Slide 2
Slide 2 text
No content
Slide 3
Slide 3 text
All signal APIs are synchronous
signal computed
input linkedSignal
Async Data
resource
resource incorporates async
data in signal-based code and
reads that synchronously
Slide 4
Slide 4 text
No content
Slide 5
Slide 5 text
No content
Slide 6
Slide 6 text
resource
• Fetch data from the API
• Update data locally
• Asynchronously load local resource
• It should not be used for mutation such as
POST operations
Slide 7
Slide 7 text
No content
Slide 8
Slide 8 text
No content
Slide 9
Slide 9 text
resource returns a
WritableResource
with read only signal-
based properties:
resource
value status isLoading
snapshot error hasValue()-
boolean function
Slide 10
Slide 10 text
resource
Slide 11
Slide 11 text
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().
Slide 12
Slide 12 text
No content
Slide 13
Slide 13 text
resource
Slide 14
Slide 14 text
No content
Slide 15
Slide 15 text
params = undefined
params = new value
Slide 16
Slide 16 text
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
Slide 17
Slide 17 text
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
Slide 18
Slide 18 text
params are
tracked
Slide 19
Slide 19 text
loaders are
not tracked
Slide 20
Slide 20 text
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.
Slide 21
Slide 21 text
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.
Slide 22
Slide 22 text
httpResource
Slide 23
Slide 23 text
httpResource
Slide 24
Slide 24 text
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()
Slide 25
Slide 25 text
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
Slide 26
Slide 26 text
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.
Slide 27
Slide 27 text
Signal in
URL
Slide 28
Slide 28 text
Works with
Interceptors
Slide 29
Slide 29 text
Other message
shape
• httpResource(…)
• httpResource.text()
• httpResource.blob()
• httpResource.arrayBuffer()
Slide 30
Slide 30 text
Cache
• default
• force-cache
• no-cache
• no-store
• reload
• only-if-cached
Slide 31
Slide 31 text
Cache
Slide 32
Slide 32 text
Request
parameters
• url
• method
• body
• params
• headers
• context
• reportProgress
• withCredentials
• keepalive
• cache
• priority
• referrer
• timeout
• transferCache
Slide 33
Slide 33 text
Thank YOU
• [email protected]
• Training
• Consulting
• Speaking
• MVP development
• Product Development
• API-AGENTS-AGNULAR