Error: Unable to assign value to property 12 because the object does not support extensibility

I'm facing an issue with my client application as I cannot figure out the error I am encountering. Despite successfully subscribing to a GraphQL subscription and receiving updates, I am struggling to update the TypeScript array named "models:ModelClass[]" that is connected to the view.

Am I overlooking something or making a mistake?

models.component.ts

this.apollo.subscribe({
  query: gql`
    subscription {
      newModelCreated{
        _id
        name
        type
        train_status
        deploy_status
        data_path
        description
        created_at
        updated_at
      }
    }
  `
}).subscribe((data) => {
  console.log("CREATED: " + JSON.stringify(data.newModelCreated));
  console.log(data.newModelCreated);
   var temp:ModelClass = data.newModelCreated;
   this.models.push(temp);
});

model-class.ts

export interface ModelClass {
    _id: string;
    name: string;
    type: string;
    parameters: {
        alpha: number;
    };
    train_status: string;
    deploy_status: string;
    test_accuracy: string;
    created_at: number;
    updated_at: number;
}

Answer №1

It seems like the array stored in this.models is returned by Apollo, and you're looking to append a newly created object to it. However, keep in mind that Apollo returns immutable objects!

To achieve adding a new model to the initial array, you'll need to clone the array first. You can do something like this inside the subscribe function:

this.apollo
    .watchQuery({query: INITIAL_GQL_REQUEST})
    .subscribe((data) => {
        this.models = data.models.map((model) => ({
            id: model.id,
            name: model.name,
            another: model.another
        }));
    });

By cloning the array in this way, your subscription request will be able to add a new model to this plain JavaScript array.

Just a note: It's likely that Apollo returns immutable objects because they are stored in the cache, and depending on your fetch policy, mutating them could result in missed cache hits.

I hope this explanation helps!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Consistently encountering the message 'Error: timeout of 2000ms exceeded' while using Selenium

Good morning, Currently, I am in the process of learning how to use Selenium with JavaScript (specifically using Mocha). I have created a very basic test that is causing some issues during runtime. Whenever I run the test, a new instance of Chrome opens a ...

Error in Node.js: Unable to access properties of null value within Express

While using Express (with node.js) and MongoDB, I encountered an error when trying to view or update a user profile. The middleware token check worked fine getProfileFields:::::::::::::>>>>e: TypeError: Cannot read properties of null (rea ...

Can someone please provide instructions on how to customize the textfield caret using JavaScript?

Is there a way to modify the appearance of a caret so that it resembles a letter or some other shape? Appreciate any suggestions. Thank you! ...

What is a more efficient way to avoid duplicating code in javascript?

Is there a way to avoid repeating the same code for different feeds? I have 8 feeds that I would like to use and currently, I am just incrementing variable names and feed URLs. <script type="text/javascript> function showFeed(data, content ...

When trying to convert a function component to a class component, using `npm init react-app` may result in the error `ReferenceError: React is not defined no-undef`

After running npm init react-app appname, I noticed that the file App.js was created, containing a function component: function App() { return ( <SomeJSX /> ); } I decided to change this function component into a class component like this: c ...

What is preventing me from directly assigning properties to my data object?

Struggling to access my question props in order to assign its property directly into my data properties. Although I can use the property directly from my template, I am unable to assign it into the data. Currently, I can only retrieve the value of props f ...

Adjusting the width of a nested Angular custom directive within an *ngIf statement to an absolute value

I'm struggling with a custom angular directive that I only want to display conditionally using ng-if. The directive contains HTML elements, one of which is positioned absolutely. My goal is to make the absolute element's width match the root wid ...

Is it possible to turn off ajax within an iframe?

I'm currently developing a project that allows users to customize their page. What is the best way to prevent ajax functionality without having to disable javascript in an iframe? ...

Javascript code not running as expected

Check out this code snippet: function generateRandomTeams() { const prom = new Promise(() => { // ... console.log('teams', props.state.teams) // logs }) .then(() => { console.log('here') // doesn't log }) ...

Pictures squeezed between the paragraphs - Text takes center stage while images stand side by side

I'm struggling to figure out how to bring the text between the two images to the front without separating them. The images should be positioned next to each other with a negative square in-between, and the text within this square should be centered b ...

Accessing Wikipedia's API in order to retrieve search query results

I'm currently working on incorporating Wikipedia's API into my web page to execute a search query and display the results. Here is the progress I've made so far: "use strict"; $(document).ready(function(){ function searchWikipedia(searchC ...

Exploring innovative designs for asynchronous JavaScript programming

Imagine you have an Express app and you need to retrieve data from a database to display on the frontend. There's a function in your code that looks like this (using node-mysql for handling database queries) exports.getData = function() { ...

How can I fill a FormArray within a Mat Table?

I've been attempting to construct a material table using FormArray, but I've encountered an issue with the formContolName not being set. Here is the code snippet I've put together: TS form = this.fb.group({ production: this.fb.array([this ...

"Reacting to click events, all buttons have been successfully updated in ReactJS

When a button is clicked, all buttons are updated simultaneously. However, I am looking to only change the state of the specific button that is clicked. Please refer to the image links and code provided below. import React from 'react'; import & ...

What is a more efficient method for structuring this React page while making an asynchronous request to the API?

When developing, I encountered this scenario where I needed to ensure that a certain useEffect function only runs once. To achieve this, I established router.query.something as a dependency for the effect. The logic is such that the request will only trigg ...

Is Sass only compatible with Ubuntu for monitoring once?

After successfully installing Sass on Ubuntu, I ran the command sass --watch scss:css and it worked perfectly. However, now I have to manually run this command every time I make changes to my code. It seems like it only works once. Can someone please ass ...

Struggling to iterate over key-value pairs in a JSON object?

I am currently working with AngularJS and have successfully retrieved exchange rates from fixer.io. However, I am facing difficulties in extracting both the country and rate data by looping through the key-value pairs. At the moment, I can only access the ...

Unable to display image on HTML page in Sails JS

In my current project, I am utilizing Sails Js and Mongo DB for development. When a user uploads an image and content for a blog post, I store it in the images folder and save the file destination along with the content to MongoDB. My goal is to display bo ...

Understanding the process of linking JavaScript code to a database within the ASP.NET framework

I have been successfully using an ASP.NET application to connect to a SQL Server 2016 database. However, I now have a new task of incorporating Javascript into the code in order to retrieve data from the database and present it to the user. I am aware of t ...

Display Material Popup in Angular before user leaves the page

My goal is to display an Angular Material Dialog Box (Popup window) when the user clicks the Chrome Window Close button. The Dialog modal should prompt the user if they want to save changes or cancel. However, the modal only appears for a brief moment and ...