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

src/components/trk/Trk.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 getUri from '../../lib/ids';
 
 import Trkseg from '../trkseg';
@@ -19,17 +21,44 @@ interface Props {
   vectorSource: VectorSource;
 }
 export const Trk: Component<Props> = ({ vectorSource, trkId }) => {
-  const [trk] = createResource(
-    trkId,
-    async () =>
-      await dispatch({
-        action: 'getTrk',
-        params: {
-          id: trkId,
-        },
-      })
+  const [trk, setTrk] = createSignal<Trk>();
+  const [dispatchId, setDispatchId] = createSignal<number>(-1);
+
+  const trkCallBack = (error: any, result: any, id?: number) => {
+    if (error) {
+      console.error({ caller: 'trkCallBack', error });
+    } else {
+      console.log({ caller: 'trkCallBack', result });
+      setTrk(result);
+    }
+    if (id) {
+      setDispatchId(id);
+    }
+  };
+
+  dispatch(
+    {
+      action: 'getAndWatch',
+      params: {
+        id: trkId,
+        method: 'getTrk',
+      },
+    },
+    trkCallBack,
+    true
   );
 
+  onCleanup(() => {
+    dispatch({
+      action: 'cancelWatch',
+      params: {
+        id: trkId,
+        method: 'getTrk',
+      },
+    });
+    cancelDispatch(dispatchId());
+  });
+
   createEffect(() => {
     console.log({ caller: 'Trk', vectorSource, trkId, trk: trk() });
   });