How do I group multiple graphics layers together and get their geometry?

[Josh-R]

I have a sketch tool (based on this sample) that creates graphics that are used for geometry queries. The problem is that my code is only using the most recently drawn polygon for the query.

How do I append graphics together so that the user can draw multiple graphics and have the combined areas be used for the geometry query?

sketchViewModel.on('create', (event) => {
        if (event.state === 'complete') {
            sketchGeometry = event.graphics.geometry;
            console.log('sketch created');

            // apply a grayscale feature effect to non selected features
            DataLayers.forEach((layer) => {
                view.whenLayerView(layer).then((layerView) => {
                    const featureFilter = { where: fullQuery, geometry: sketchGeometry };
                    layerView.featureEffect = {
                        filter: featureFilter,
                        excludedEffect: 'grayscale(100%) opacity(70%)',
                    };
                });
            });
            updateChartsUsingActiveLayerView();
        }

Is using a groupLayer the correct way? If so, how do I get the geometry of all features in the groupLayer.

Thanks for any help!

[JamesIng · Accepted solution]

@Josh-R What you'll likely want to do is to get all the graphics from the layer attached to the sketchViewModel and then union them together to get a new geometry that is all the graphics combined.
And then use that to apply the filter.

You can see this in practice in this esri sample.

https://developers.arcgis.com/javascript/latest/sample-code/sandbox/?sample=highlight-features-by-ge...

Specifically these lines:

        sketchViewModel.on("create", async (event) => {
          if (event.state === "complete") {
            // this polygon will be used to query features that intersect it
            const geometries = polygonGraphicsLayer.graphics.map(function (graphic) {
              return graphic.geometry;
            });
            const queryGeometry = await geometryEngineAsync.union(geometries.toArray());
            selectFeatures(queryGeometry);
          }
        });

[Josh-R]

@JamesIng Thank you so much! This ended up being exactly what I needed and worked for both my create and update functions.