Attribute join on the fly for visualization with ArcGIS JS API

Lets say I have 2 layers – one that contains shape information about a given group of entities, say countries, and one that contains some data attributes about the same group of entities. Both layers have an identifier attribute that can be used to join the data, say, the country name, or ISO code. To make this more concrete, let’s take some examples. On ArcGIS Online, we have the Countries reference layer, which has all the shape/polygon information, along with country name and ISO codes. Renewable Energy as % of Consumption is a good example of the second type of layer – it has identifier attributes for county name and ISO code, as well as data points for energy consumption, but its only has spatial attributes about the country’s latlng centroid, not any polygon data.

I want to display the countries as polygons, but colored according to the data in the second dataset. I want to do this in an arcgis-js-api app. If all the data was part of one dataset, this would be easy. I could just do something like

const renderer = {
  type: 'simple',
  symbol: defaultSymbol,
  visualVariables: [
    {
      type: 'color',
      field: 'value_2017',
      stops: [
        {
          value: 0,
          color: '#ebe6df',
          label: '0',
        },
        {
          value: 500,
          color: '#7bccc4',
          label: '500',
        },
        {
          value: 11000,
          color: '#436480',
          label: '11,000',
        },
      ],
    },
  ],
};

export const energyByCountry = new FeatureLayer({
    url: countriesReferenceUrl,
    outFields: ['*'],
    renderer
});

Of course the issue with this is that the value_2017 attribute is not on the countriesReferenceUrl layer. How can I tell the renderer to use the attribute value of the other layer for the feature that it matches to according to country name / ISO code / some ID value.

I had a similar issue last month, where I asked the question Forking and adding to FeatureLayer using ArcGIS Online. This scenario was slightly different, as the second data source was not a featurelayer, but rather just an excel table with 0 geographic information, but it did have an ID column (for state names and abbreviations) that I could use to match the data with a polygon layer. The solution here was to create a new layer – starting from the layer which contains polygons, I could do a data add-join in ArcGIS Pro, tacking on additional attributes to the existing shapefile layer. I feel like in the case where both layers already exist as featurelayers, and there are matching ID fields, this seems like it would be overkill.

Is there a way in the ArcGIS API for JavaScript to do this on the fly or do I have to create a new layer which joins the data between the two existing layers?