<div class="grid-container padding-leader-1 padding-trailer-3">
  <h1>Query all features from a feature service using ArcGIS REST JS</h1>
  <div class="wrapper column-24">
    <p>When querying an ArcGIS Feature Service, there is typically a maximum number of features (records) that will be returned from any query – usually set to 1000. If you want to get <em>all</em> the features in the service, ArcGIS REST JS does not currently do this (see <a href="https://github.com/Esri/arcgis-rest-js/issues/690">this issue</a>) -  you’ll need to make multiple queries to the service. Use the package <a href="https://www.npmjs.com/package/query-all-features">query-all-features</a> to do this.</p>
    
    <p id="errorDomNode" class="error alert alert-red"> </p>
    <h3>Results:</h3>
    <pre class="results" id="resultsDomNode"><span style="color:gray">[none yet]</span></pre>
  </div>
</div>

.wrapper {
  .results {
    font-family: monospace;
  }
}

// Similar version that uses the ArcGIS API for JavaScript instead of ArcGIS REST JS:
// https://codepen.io/gavinr/pen/QWEdgZw?editors=0010

// For more info on usage: https://www.npmjs.com/package/query-all-features

// import { queryAllFeatures } from "https://cdn.skypack.dev/query-all-features";
// Replace skypack with esm.sh because skypack is not maintained anymore (2023-05)
import { queryAllFeatures } from "https://esm.sh/query-all-features";

queryAllFeatures({
  url: "https://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer/0"
}).then((results) => {
  console.log('results', results);
  resultsDomNode.innerHTML = `${results.features.length} results: <br /><br />` +  JSON.stringify(results, null, 4);
  errorDomNode.classList.remove('is-active');
}, (err) => {
  console.log('err', err);
  errorDomNode.classList.add('is-active');
  errorDomNode.innerHTML = err;
});