Angular8: Error intercepting http response

Question

I am trying to intercept all the HttpResponse using angular interceptor as

return next.handle(request).pipe(
      map((event: HttpEvent<any>) => {
        if (event instanceof HttpResponse) {
          // do stuff with response and headers you want
          event.body = event.body.data || event.body;
          console.log('event--->>>', event);
        }
        return event;      
      })
    );

but typescript gives an error

ERROR in src/app/shared/interceptors/auth.interceptor.ts(35,17): error TS2540: Cannot assign to 'body' because it is a read-only property.

What should I do to tackle this?

NOTE: Cloning the object using Object.assign still gives the same error for new object.

Answer 1

The body property of the event object is readonly, You cannot redefine / reassign it. What you could do, is copy the event into a newly created event modify the body of this event and then return this object.

return next.handle(request).pipe(
      map((event: HttpEvent<any>) => {
        if (event instanceof HttpResponse) {
          // we use this syntax to deep copy the event. 
          // we don't want any reference to the previous event.
          const newEvent = {...event};
          // we edit the copied event. 
          newEvent.body = newEvent .body.data || newEvent .body;
          console.log('event--->>>', newEvent );
          // we need to return the new event.
          return newEvent
        }
        // nothing is happening, we are returning the event.
        return event;      
      })
    );

Answer 2

can't you reassign the variable like this :

return next.handle(request).pipe(
  map((event: HttpEvent<any>) => {
    let returnValue = Object.assign({}, event);
    if (event instanceof HttpResponse) {
      // do stuff with response and headers you want
      returnValue.body = event.body.data || event.body;
      console.log('event--->>>', event);
    }
    return returnValue;      
  })
);

since you've reassigned the variable, you should be able to change it's body

EDIT : if you are sure you have the body property inside your object you can do the assignation like this

return next.handle(request).pipe(
    map((event: HttpEvent<any>) => {
        let returnValue = Object.assign({}, event);
        if (event instanceof HttpResponse) {
            // do stuff with response and headers you want
            returnValue.body = event['body'].data || event['body'];
            console.log('event--->>>', event);
        }
        return returnValue;
    );    

Answer 3

Finally solved it using the event.clone method

    return next.handle(request).pipe(
      map((event: HttpEvent<any>) => {
        if (event instanceof HttpResponse) {
          let newEvent: HttpEvent<any>;
          // alter response here. maybe do the following
          newEvent = event.clone({
            // alter event params here
            body: event.body.data || event.body
          });
          return newEvent;
        }
      })
    );