Specific geojson URL is not working within my react app using deck.gl and nebula.gl

Question

Im trying to display a polygon for every country in the world, this locations are within the countries URL but this doesnt get me the polygon in which i want, is uses it as a string. Though within the example the data cannot be fetched but you can access the site itself. https://codesandbox.io/s/deckgl-and-nebulagl-editablegeojsonlayer-no-react-forked-08hvs?file=/app.js

  const countries = 'https://d2ad6b4ur7yvpq.cloudfront.net/naturalearth-3.3.0/ne_50m_admin_0_scale_rank.geojson';

    console.log(countries)

    const layerGeo = new EditableGeoJsonLayer({
        id: 'geojson-layer',
        data: countries,
        mode: ViewMode,
        onClick: d => console.log(d)
    })


<DeckGL
  initialViewState={viewState}
  controller={true}
  layers={layerGeo}
  getTooltip={getTooltip}
  views={new MapView({repeat: true})}
>
 <StaticMap
  mapStyle='mapbox://styles/mapbox/streets-v11'
  mapboxApiAccessToken={MAPBOX_TOKEN}
 />
</DeckGL>

How can I get this data from the URL without copying the file and storing it myself.

Answer 1

Instead of trying to get the URL to work, instead I downloaded the file and imported into the app itself, therefore removing this issue.

Answer 2

From the documentation: the data option accepts javascript object. In your example code you pass a url as string.

Try to fetch the url first, then parse the response data as object. Finally you can put in data option:

const url = 'https://d2ad6b4ur7yvpq.cloudfront.net/naturalearth-3.3.0/ne_50m_admin_0_scale_rank.geojson';

async function getCountries(url) 
{
  let response = await fetch(url);
  let data = await response.json()
  return data;
}

let countries = getCountries(url);

const layerGeo = new EditableGeoJsonLayer({
  id: 'geojson-layer',
  data: countries,
  mode: ViewMode,
  onClick: d => console.log(d)
})