How to change the symbol and/or geometry in ArcGIS API for JavaScript 4?

Question

The below code works to change the Graphic Symbol and Geometry in ArcGIS 3.18 JavaScript API.

        /**********************
        * Create a point graphic
        **********************/
        var pointX = new Point({
            longitude: location.long,
            latitude: location.lat
        });

        var templateX = new InfoTemplate({
        title: "${Name}",
        content: "Id: ${Id}"
        });    

        var pointGraphicX = new Graphic(
            pointX,
            markerSymbolGreen, {
                Id: deviceId,
                Name: name,
            }, templateX); 

        assets.graphic = pointGraphicX;
        map.graphics.add( pointGraphicX);

        ....
        ....
        if (assets.graphic != null){
            if(data.sensors.temp > 25) {
                assets.graphic.setSymbol(markerSymbolRed);
            } else {
                assets.graphic.setSymbol(markerSymbolGreen);
            }
        }

        ....
        ....
        var newPoint = new Point({
            longitude: newlocation.long,
            latitude: newlocation.lat
        });
        assets.graphic.setGeometry(newPoint);

But setSymbol() or setGeometry() is not a method in the ArcGIS 4.2 JavaScript API Class.

According to https://developers.arcgis.com/javascript/latest/guide/working-with-props/index.html, I've tried

assets.graphic.set(markerSymbolRed) 
assets.graphic.set(newPoint) 
assets.graphic.symbol = markerSymbolRed

But it seems it's not working.

How do I change the Symbol and Geometry of existing graphic Symbol in ArcGIS 4.2 JavaScript?

Answer 1

To update a graphic, you first have to remove that graphic, then, add it again with its new properties

graphicLayer.remove(pointGraphicX);
//make a new MarkerSymbol with your condition returning the desired color
//make a new Point with updated coords and containing the new MarkerSymbol
//make a new Graphic with the new Point
graphicLayer.add(pointGraphicX);

Answer 2

It is also possible to update the symbol on an existing graphic using the following code:

      graphic.set('symbol', symbolObj);