Relying on the change handler for Gpx, Trk and Trkseg too.

src/components/gpx/Gpx.tsx

@@ -2,13 +2,15 @@ import {
   Component,
   createEffect,
   createResource,
+  createSignal,
   For,
+  onCleanup,
   Suspense,
 } from 'solid-js';
 
 import OlMap from 'ol/Map';
 
-import dispatch from '../../workers/dispatcher-main';
+import dispatch, { cancelDispatch } from '../../workers/dispatcher-main';
 import Trk from '../trk';
 import getUri from '../../lib/ids';
 import VectorSource from 'ol/source/Vector';
@@ -23,17 +25,44 @@ interface Props {
 }
 
 export const Gpx: Component<Props> = ({ map, gpxId }) => {
-  const [gpx] = createResource(
-    gpxId,
-    async () =>
-      await dispatch({
-        action: 'getGpx',
-        params: {
-          id: gpxId,
-        },
-      })
+  const [gpx, setGpx] = createSignal<Gpx>();
+  const [dispatchId, setDispatchId] = createSignal<number>(-1);
+
+  const gpxCallBack = (error: any, result: any, id?: number) => {
+    if (error) {
+      console.error({ caller: 'gpxCallBack', error });
+    } else {
+      console.log({ caller: 'gpxCallBack', result });
+      setGpx(result);
+    }
+    if (id) {
+      setDispatchId(id);
+    }
+  };
+
+  dispatch(
+    {
+      action: 'getAndWatch',
+      params: {
+        id: gpxId,
+        method: 'getGpx',
+      },
+    },
+    gpxCallBack,
+    true
   );
 
+  onCleanup(() => {
+    dispatch({
+      action: 'cancelWatch',
+      params: {
+        id: gpxId,
+        method: 'getGpx',
+      },
+    });
+    cancelDispatch(dispatchId());
+  });
+
   const vectorSource = new VectorSource();
   const vectorLayer = new VectorLayer({ source: vectorSource, style });
   createEffect(() => map()?.addLayer(vectorLayer));