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

src/components/trkseg/Trkseg.tsx

@@ -1,9 +1,8 @@
-import { Component, createEffect, createResource } from 'solid-js';
+import { Component, createEffect, createSignal, onCleanup } from 'solid-js';
 
-import dispatch from '../../workers/dispatcher-main';
+import dispatch, { cancelDispatch } from '../../workers/dispatcher-main';
 import VectorSource from 'ol/source/Vector';
 import GeoJSON from 'ol/format/GeoJSON';
-import { Feature } from 'ol';
 
 interface Props {
   trksegId: string;
@@ -11,17 +10,44 @@ interface Props {
 }
 
 export const Trkseg: Component<Props> = ({ vectorSource, trksegId }) => {
-  const [trkseg] = createResource(
-    trksegId,
-    async () =>
-      await dispatch({
-        action: 'getTrkseg',
-        params: {
-          id: trksegId,
-        },
-      })
+  const [trkseg, setTrkseg] = createSignal<Trkseg>();
+  const [dispatchId, setDispatchId] = createSignal<number>(-1);
+
+  const trksegCallBack = (error: any, result: any, id?: number) => {
+    if (error) {
+      console.error({ caller: 'trksegCallBack', error });
+    } else {
+      console.log({ caller: 'trksegCallBack', result });
+      setTrkseg(result);
+    }
+    if (id) {
+      setDispatchId(id);
+    }
+  };
+
+  dispatch(
+    {
+      action: 'getAndWatch',
+      params: {
+        id: trksegId,
+        method: 'getTrkseg',
+      },
+    },
+    trksegCallBack,
+    true
   );
 
+  onCleanup(() => {
+    dispatch({
+      action: 'cancelWatch',
+      params: {
+        id: trksegId,
+        method: 'getTrkseg',
+      },
+    });
+    cancelDispatch(dispatchId());
+  });
+
   createEffect(() => {
     console.log({ caller: 'Trkseg', vectorSource, trksegId, trkseg: trkseg() });