Trying to Cache HttpClient Response but getting 'HttpResponse<Blob>' is not assignable to parameter of type 'Response'

Question

So, basically in my Angular project I'm trying to cache an HttpClient's request and response using the Cache API through the following line of code:

from(caches.open(this.getCacheName(this.chatAttachmentsCache)))
  .pipe(map(cache => {
    cache.put(request, response);
  }));

The request argument is the request's URL and the response argument is the request's response.

I pass the HttpResponse object, that I get from the successful HttpClient GET request, to the cache.put call as the response. However, I keep getting this error in the text editor.

Argument of type 'HttpResponse<Blob>' is not assignable to parameter of type 'Response'.
  Type 'HttpResponse<Blob>' is missing the following properties from type 'Response': redirected, trailer, bodyUsed, arrayBuffer, and 4 more

I obtain the HttpResponse object from the following line of code:

    return this.httpClient.get(url, { responseType: "blob", observe: "response" });

I don't really know how to resolve this issue. Does this mean I cannot use the caches API with HttpClient in Angular? Or is there some workaround to handle such an issue?

Thanks in advance.

Answer 1

I managed to resolve this issue.

For anyone experiencing the same issue. I created a new Response object through the constructor and passed the body, status and status text from the HttpResponse to it as per the documentation here. Here is an example:

const responseAsResponseType = new Response(response.body, {
  "status": response.status,
  "statusText": response.statusText,
});