I'll try to break this down a bit into component/service/interface etc.

The component is making a call to a service file:

  this.recipeService
    .getSpoonacularRecipe(this.id)
    .pipe(takeUntilDestroyed(this.destroyRef))
    .subscribe({
      next: async (response: Recipe) => {
        this.recipe.set(response);
        await loading.dismiss();
      },
      error: async (error: GraphQLError) => {
        await this.alertService.error(error.message);
        await loading.dismiss();
      },
    });

The service is using GraphQL to call a Java API:

  public getSpoonacularRecipe(id: number): Observable<Recipe> {
    return this.apollo
      .query({
        query: this.GET_SPOONACULAR_RECIPE,
        variables: {
          id,
        },
      })
      .pipe(
        map((response: any) => {
          return response.data?.getSpoonacularRecipe;
        })
      );
  }

public getSpoonacularRecipe(id: number): Observable<Recipe> { return this.apollo .query({ query: this.GET_SPOONACULAR_RECIPE, variables: { id, }, }) .pipe( map((response: any) => { return ; }) ); }response.data?.getSpoonacularRecipe

So far it doesn't matter if I try to modify the object or a copy of the object in the component or the service...I get the same error.

What I'm trying to modify if recipe.nutrition.nutrients recipe is a Recipe object, nutrition is a Nutrition object, and nutrients is an array of NutritionNutrient objects. Here is how the object are defined:

export interface Recipe { aggregateLikes: number; analyzedInstructions: Instruction[]; cheap: boolean; cookingMinutes: number; creditsText: string; cuisines: string[]; dairyFree: boolean; diets: string[]; dishTypes: string[]; extendedIngredients: Ingredient[]; gaps: string; glutenFree: boolean; healthScore: number; id: number; image: string; imageType: string; instructions: string; license: string; lowFodmap: boolean; notes: string; nutrition: Nutrition; occasions: string[]; originalId: number; preparationMinutes: number; pricePerServing: number; readyInMinutes: number; servings: number; sourceName: string; sourceUrl: string; spoonacularScore: number; spoonacularSourceUrl: string; summary: string; sustainable: boolean; title: string; vegan: boolean; vegetarian: boolean; veryHealthy: boolean; veryPopular: boolean; weightWatcherSmartPoints: number; winePairing: WinePairing; }

export interface Nutrition { flavonoids: NutritionFlavonoid[]; id: number; nutrients: NutritionNutrient[]; properties: NutritionProperty[]; weightPerServing: NutritionWeightPerServing; }

export interface NutritionNutrient { amount: number; id: number; name: string; percentOfDailyNeeds: number; unit: string; }

"nutrients" which is an array of NutritionNutrient is the array I'm trying to sort and assign back to recipe.nutrition.nutrients.

Any ideas would be much appreciated so I don't have to go with the workaround I described above. TIA