Updating url in GeoJSONLayer using ArcGIS JS API - reactjs

Question

I am working on a simple node/react application that allows for the the request of data using the url parameter in GeoJSONLayer. The way that I set up the api I need to be able to change the url to get a new set of data. I have set up a useEffect() to load the map that has all of the map elements and have told it to listen for changes on the treeURL.
const [treeURL, setTreeURL] = TreeURL();
useEffect(async()=>{
loadMap(treeURL)
},[treeURL]);
The TreeURL function is just a simple useState() to default to getAll which is the default way of getting all of the data back. This part is working fine the map renders with the data that is fetched.
const TreeURL = () => {
const getAll = 'getAll'
const [treeURL, setTreeUrl] = useState(getAll)
return [treeURL, setTreeUrl]
}
When I go to update the data using the setTreeURL() the function runs. treeURL prints out into the console, but useEffect() is not called and the map does not update.
props.list.forEach((item) => {
elements.push(
<li class="mr-3">
<button
key={item}
className="inline-block border border-blue-500 rounded py-1 px-3 bg-blue-500 text-white"
onClick={()=>{
setTreeURL(`getByParams?CONDITION=${item}`)
console.log(treeURL)
}
}>{item}
</button>
</li>)
})
How do I update GeoJSONLayer's URL once the map has been loaded?

Answer 1

While its a little difficult to answer the question without more context regarding what you'd like to achieve by updating the GeoJSON's URL, there are a couple ways I could see you accomplishing this based on how the URL is updated.
If you are trying to query the initial GeoJSON source by adding URL parameters, you might be able to use the customParameters property of a GeoJSON and use the refresh() property to fetch new data. You can check out an example of this in action provided by Esri here.
However, if you are look to load an entirely new GeoJSON, than you might have to resort to creating a new GeoJSON object with the specified URL. You can also accomplish this by reading in your GeoJSON as a blob, as seen in this code snippet below and further explained in this ArcGIS blog article.
const blob = new Blob([JSON.stringify(geojson)], {type: "application/json"});
const url = URL.createObjectURL(blob);
const layer = new GeoJSONLayer({ url });