Add FeaturesDroppedLoader to extract header value (#561)

CHANGELOG.md

@@ -4,6 +4,10 @@
 
 ## 1.5
 
+## 1.5.0-alpha.11 (2023-01-12)
+
+- Remove custom fetch function. Fixes issues with icon loading and FillStyleExtensions
+
 ## 1.5.0-alpha.10 (2023-01-04)
 
 - Allow to use custom version explicitly in GoogleMap (not 'beta' by default now) [#550](https://github.com/CartoDB/carto-react/pull/550)

packages/react-api/__tests__/hooks/useCartoLayerProps.test.js

@@ -13,6 +13,7 @@ describe('useCartoLayerProps', () => {
       'binary',
       'onViewportLoad',
       'fetch',
+      'loaders',
       'onDataLoad',
       'id',
       'visible',

packages/react-api/src/hooks/FeaturesDroppedLoader.js

@@ -0,0 +1,13 @@
+export default {
+  name: 'FeaturesDroppedLoader',
+  module: 'carto',
+  category: 'geometry',
+  extensions: [],
+  // By only specifying `carto-vector-tile` the SpatialIndexLayer will not use this loader
+  mimeTypes: ['application/vnd.carto-vector-tile'],
+  parse: async (arrayBuffer, options, context) => {
+    const isDroppingFeatures = context.response.headers['features-dropped-from-tile'];
+    const result = await context.parse(arrayBuffer, options, context);
+    return result ? { ...result, isDroppingFeatures } : null;
+  }
+};

packages/react-api/src/hooks/useCartoLayerProps.js

@@ -5,6 +5,7 @@ import useGeojsonFeatures from './useGeojsonFeatures';
 import useTileFeatures from './useTileFeatures';
 import { getDataFilterExtensionProps } from './dataFilterExtensionUtil';
 import { getMaskExtensionProps } from './maskExtensionUtil';
+import FeaturesDroppedLoader from './FeaturesDroppedLoader';
 
 export default function useCartoLayerProps({
   source,
@@ -51,6 +52,7 @@ export default function useCartoLayerProps({
     ...(viewportFeatures && {
       onViewportLoad,
       fetch,
+      loaders: [FeaturesDroppedLoader],
       onDataLoad
     })
   };

packages/react-api/src/hooks/useTileFeatures.js

@@ -132,11 +132,7 @@ export default function useTileFeatures({
   const fetch = useCallback(
     (...args) => {
       stopAnyCompute();
-
-      if (spatialIndex) {
-        return Layer.defaultProps.fetch.value(...args);
-      }
-      return customFetch(...args);
+      return Layer.defaultProps.fetch.value(...args);
     },
     [stopAnyCompute, spatialIndex]
   );
@@ -156,19 +152,6 @@ export default function useTileFeatures({
   return [onDataLoad, onViewportLoad, fetch];
 }
 
-// WORKAROUND: To read headers and know if the tile is dropping features.
-const customFetch = async (url, { layer, loaders, loadOptions, signal }) => {
-  loadOptions = loadOptions || layer.getLoadOptions();
-  loaders = loaders || layer.props.loaders;
-
-  const headers = loadOptions.fetch.headers;
-  const response = await fetch(url, { signal, headers });
-  const isDroppingFeatures =
-    response.headers.get('Features-Dropped-From-Tile') === 'true';
-  const result = await parse(response, loaders, loadOptions);
-  return result ? { ...result, isDroppingFeatures } : null;
-};
-
 const getColumnNameFromGeoColumn = (geoColumn) => {
   const parts = geoColumn.split(':');
   return parts.length === 1 ? parts[0] : parts.length === 2 ? parts[1] : null;

packages/react-api/src/index.js

@@ -4,6 +4,7 @@ export { getStats as _getStats } from './api/stats';
 export { getTileJson as _getTileJson } from './api/tilejson';
 export { executeModel as _executeModel } from './api/model';
 
+export { default as FeaturesDroppedLoader } from './hooks/FeaturesDroppedLoader';
 export { default as useCartoLayerProps } from './hooks/useCartoLayerProps';
 
 export { getDataFilterExtensionProps } from './hooks/dataFilterExtensionUtil';