Consolidate and document fetch prop (visgl#5854)

harisbal · Jun 10, 2021 · ef64ce1 · ef64ce1
1 parent 7090880
commit ef64ce1
Show file tree

Hide file tree

Showing 6 changed files with 61 additions and 55 deletions.
diff --git a/docs/api-reference/core/layer.md b/docs/api-reference/core/layer.md
@@ -421,6 +421,25 @@ Layers may also include specialized loaders for their own use case, such as imag
 Find usage examples in the [data loading guide](/docs/developer-guide/loading-data.md).
 
 
+##### `fetch` (Function, optional)
+
+Called to fetch and parse content from URLs.
+
+The function receives the following arguments:
+
+- `url` (String) - the URL to fetch
+- `context` (Object)
+  + `layer` (Layer) - the current layer
+  + `propName` (String) - the name of the prop that is making the request
+  + `loaders` (Array?) - an array of [loaders.gl loaders](https://loaders.gl/docs/developer-guide/using-loaders) to parse this request with, default to `props.loaders`.
+  + `loadOptions` (Object?) - loader options for this request, default to `props.loadOptions`.
+  + `signal` ([AbortSignal](https://developer.mozilla.org/en-US/docs/Web/API/AbortController)?) - the signal to abort the request
+
+The function is expected to return a Promise that resolves to loaded data.
+
+* Default: `load(url, loaders, loadOptions)`
+
+
 ##### `onDataLoad` (Function, optional)
 
 Called when remote data is fully loaded. This callback applies when `data` is assigned a value that is either string (URL), Promise or an async iterable.

diff --git a/modules/core/src/lib/composite-layer.js b/modules/core/src/lib/composite-layer.js
@@ -152,6 +152,7 @@ export default class CompositeLayer extends Layer {
       positionFormat,
       modelMatrix,
       extensions,
+      fetch,
       _subLayerProps: overridingProps
     } = this.props;
     const newProps = {
@@ -168,7 +169,8 @@ export default class CompositeLayer extends Layer {
       wrapLongitude,
       positionFormat,
       modelMatrix,
-      extensions
+      extensions,
+      fetch
     };
 
     const overridingSublayerProps = overridingProps && overridingProps[sublayerProps.id];

diff --git a/modules/core/src/lib/layer.js b/modules/core/src/lib/layer.js
@@ -68,10 +68,20 @@ const defaultProps = {
   onError: {type: 'function', value: null, compare: false, optional: true},
   fetch: {
     type: 'function',
-    value: (url, {propName, layer}) => {
+    value: (url, {propName, layer, loaders, loadOptions, signal}) => {
       const {resourceManager} = layer.context;
-      const loadOptions = layer.getLoadOptions();
-      const {loaders} = layer.props;
+      loadOptions = loadOptions || layer.getLoadOptions();
+      loaders = loaders || layer.props.loaders;
+      if (signal) {
+        loadOptions = {
+          ...loadOptions,
+          fetch: {
+            ...loadOptions?.fetch,
+            signal
+          }
+        };
+      }
+
       let inResourceManager = resourceManager.contains(url);
 
       if (!inResourceManager && !loadOptions) {

diff --git a/modules/geo-layers/src/mvt-layer/mvt-layer.js b/modules/geo-layers/src/mvt-layer/mvt-layer.js
@@ -1,7 +1,6 @@
 import {Matrix4} from 'math.gl';
 import {MVTLoader} from '@loaders.gl/mvt';
 import {binaryToGeoJson} from '@loaders.gl/gis';
-import {load} from '@loaders.gl/core';
 import {COORDINATE_SYSTEM} from '@deck.gl/core';
 import {_binaryToFeature, _findIndexBinary} from '@deck.gl/layers';
 import {ClipExtension} from '@deck.gl/extensions';
@@ -19,14 +18,6 @@ const defaultProps = {
   binary: true
 };
 
-async function fetchTileJSON(url) {
-  try {
-    return await load(url);
-  } catch (error) {
-    throw new Error(`An error occurred fetching TileJSON: ${error}`);
-  }
-}
-
 export default class MVTLayer extends TileLayer {
   initializeState() {
     super.initializeState();
@@ -42,7 +33,7 @@ export default class MVTLayer extends TileLayer {
 
   updateState({props, oldProps, context, changeFlags}) {
     if (changeFlags.dataChanged) {
-      this._updateTileData({props});
+      this._updateTileData();
     }
 
     if (this.state.data) {
@@ -51,15 +42,20 @@ export default class MVTLayer extends TileLayer {
     }
   }
 
-  async _updateTileData({props}) {
-    const {onDataLoad} = this.props;
-    let {data} = props;
+  /* eslint-disable complexity */
+  async _updateTileData() {
+    let {data, minZoom, maxZoom} = this.props;
     let tileJSON = null;
-    let {minZoom, maxZoom} = props;
 
     if (typeof data === 'string' && !isURLTemplate(data)) {
+      const {onDataLoad, fetch} = this.props;
       this.setState({data: null, tileJSON: null});
-      tileJSON = await fetchTileJSON(data);
+      try {
+        tileJSON = await fetch(data, {propName: 'data', layer: this, loaders: []});
+      } catch (error) {
+        this.raiseError(error, 'loading TileJSON');
+        data = null;
+      }
 
       if (onDataLoad) {
         onDataLoad(tileJSON);
@@ -85,6 +81,7 @@ export default class MVTLayer extends TileLayer {
 
     this.setState({data, tileJSON, minZoom, maxZoom});
   }
+  /* eslint-disable complexity */
 
   renderLayers() {
     if (!this.state.data) return null;
@@ -96,14 +93,14 @@ export default class MVTLayer extends TileLayer {
     if (!url) {
       return Promise.reject('Invalid URL');
     }
-    let options = this.getLoadOptions();
+    let loadOptions = this.getLoadOptions();
     const {binary, fetch} = this.props;
     const {signal, x, y, z} = tile;
     const loaders = this.props.loaders[0];
-    options = {
-      ...options,
+    loadOptions = {
+      ...loadOptions,
       mvt: {
-        ...(options && options.mvt),
+        ...loadOptions?.mvt,
         coordinates: this.context.viewport.resolution ? 'wgs84' : 'local',
         tileIndex: {x, y, z}
         // Local worker debug
@@ -113,7 +110,7 @@ export default class MVTLayer extends TileLayer {
       },
       gis: binary ? {format: 'binary'} : {}
     };
-    return fetch(url, {layer: this, loaders, options, signal});
+    return fetch(url, {propName: 'data', layer: this, loaders, loadOptions, signal});
   }
 
   renderSubLayers(props) {

diff --git a/modules/geo-layers/src/terrain-layer/terrain-layer.js b/modules/geo-layers/src/terrain-layer/terrain-layer.js
@@ -21,7 +21,6 @@
 import {CompositeLayer} from '@deck.gl/core';
 import {SimpleMeshLayer} from '@deck.gl/mesh-layers';
 import {WebMercatorViewport, COORDINATE_SYSTEM} from '@deck.gl/core';
-import {load} from '@loaders.gl/core';
 import {TerrainLoader} from '@loaders.gl/terrain';
 import TileLayer from '../tile-layer/tile-layer';
 import {urlType, getURLFromTemplate} from '../tile-layer/utils';
@@ -99,26 +98,22 @@ export default class TerrainLayer extends CompositeLayer {
   }
 
   loadTerrain({elevationData, bounds, elevationDecoder, meshMaxError, signal, workerUrl}) {
-    const loadOptions = this.getLoadOptions();
     if (!elevationData) {
       return null;
     }
-    const options = {
-      ...loadOptions,
-      fetch: {
-        ...(loadOptions && loadOptions.fetch),
-        signal
-      },
+    const loadOptions = {
+      ...this.getLoadOptions(),
       terrain: {
         bounds,
         meshMaxError,
         elevationDecoder
       }
     };
     if (workerUrl !== null) {
-      options.terrain.workerUrl = workerUrl;
+      loadOptions.terrain.workerUrl = workerUrl;
     }
-    return load(elevationData, this.props.loaders, options);
+    const {fetch} = this.props;
+    return fetch(elevationData, {propName: 'elevationData', layer: this, loadOptions, signal});
   }
 
   getTiledTerrainData(tile) {
@@ -146,7 +141,7 @@ export default class TerrainLayer extends CompositeLayer {
     });
     const surface = textureUrl
       ? // If surface image fails to load, the tile should still be displayed
-        fetch(textureUrl, {layer: this, signal}).catch(_ => null)
+        fetch(textureUrl, {propName: 'texture', layer: this, loaders: [], signal}).catch(_ => null)
       : Promise.resolve(null);
 
     return Promise.all([terrain, surface]);
@@ -216,8 +211,7 @@ export default class TerrainLayer extends CompositeLayer {
       onTileError,
       maxCacheSize,
       maxCacheByteSize,
-      refinementStrategy,
-      fetch
+      refinementStrategy
     } = this.props;
 
     if (this.state.isTiled) {
@@ -251,8 +245,7 @@ export default class TerrainLayer extends CompositeLayer {
           onTileError,
           maxCacheSize,
           maxCacheByteSize,
-          refinementStrategy,
-          fetch
+          refinementStrategy
         }
       );
     }

diff --git a/modules/geo-layers/src/tile-layer/tile-layer.js b/modules/geo-layers/src/tile-layer/tile-layer.js
@@ -1,6 +1,5 @@
 import {CompositeLayer, _flatten as flatten} from '@deck.gl/core';
 import {GeoJsonLayer} from '@deck.gl/layers';
-import {load} from '@loaders.gl/core';
 
 import Tileset2D, {STRATEGY_DEFAULT} from './tileset-2d';
 import {urlType, getURLFromTemplate} from './utils';
@@ -24,20 +23,6 @@ const defaultProps = {
   maxCacheByteSize: null,
   refinementStrategy: STRATEGY_DEFAULT,
   zRange: null,
-  // Use load directly so we don't use ResourceManager
-  fetch: {
-    type: 'function',
-    value: (url, {layer, loaders, options, signal}) => {
-      const loadOptions = options || layer.getLoadOptions();
-      loadOptions.fetch = {
-        ...loadOptions.fetch,
-        signal
-      };
-
-      return loaders ? load(url, loaders, loadOptions) : load(url, loadOptions);
-    },
-    compare: false
-  },
   maxRequests: 6
 };
 
@@ -187,7 +172,7 @@ export default class TileLayer extends CompositeLayer {
       return getTileData(tile);
     }
     if (tile.url) {
-      return fetch(tile.url, {layer: this, signal});
+      return fetch(tile.url, {propName: 'data', layer: this, signal});
     }
     return null;
   }