Mutations second pass, add subscriptions + errors

web/frontend/src/MetricSelection.svelte

@@ -54,17 +54,15 @@
     }
 
     const client = getContextClient();
-    const query = gql`
-            mutation($name: String!, $value: String!) {
-                updateConfiguration(name: $name, value: $value)
-            }
-        `;
-
-    const updateConfiguration = ({ name, value }) => {
-        mutationStore({
-            client,
-            query,
-            variables: { name, value },
+    const updateConfigurationMutation = ({ name, value }) => {
+        return mutationStore({
+            client: client,
+            query: gql`
+                mutation($name: String!, $value: String!) {
+                    updateConfiguration(name: $name, value: $value)
+                }
+            `,
+            variables: { name, value }
     })}
 
     let columnHovering = null
@@ -92,9 +90,14 @@
         metrics = newMetricsOrder.filter(m => unorderedMetrics.includes(m))
         isOpen = false
 
-        updateConfiguration({
+        updateConfigurationMutation({
             name: cluster == null ? configName : `${configName}:${cluster}`,
             value: JSON.stringify(metrics)
+        }).subscribe(res => {
+            if (res.fetching === false && res.error) {
+                throw res.error
+                // console.log('Error on subscription: ' + res.error)
+            }
         })
     }
 </script>

web/frontend/src/PlotSelection.svelte

@@ -8,9 +8,8 @@
     export let metricsInScatterplots
 
     const client = getContextClient();
-
-    $: updateConfigurationMutation = ({ name, value }) => {
-        mutationStore({
+    const updateConfigurationMutation = ({ name, value }) => {
+        return mutationStore({
             client: client,
             query: gql`mutation($name: String!, $value: String!) {
                 updateConfiguration(name: $name, value: $value)
@@ -26,6 +25,11 @@
         updateConfigurationMutation({
                 name: data.name,
                 value: JSON.stringify(data.value)
+        }).subscribe(res => {
+            if (res.fetching === false && res.error) {
+                throw res.error
+                // console.log('Error on subscription: ' + res.error)
+            }
         })
     }
 </script>

web/frontend/src/joblist/JobList.svelte

@@ -81,34 +81,23 @@
     `;
 
     $: jobs = queryStore({
-        client,
-        query,
-        variables: { paging, sorting, filter },
+        client: client,
+        query: query,
+        variables: { paging, sorting, filter }
     });
 
-    const configName = 'plot_list_jobsPerPage'
-    let configValue = ''
+    $: matchedJobs = $jobs.data != null ? $jobs.data.jobs.count : 0;
 
-    $: if (configValue != '') {
-        mutationStore({
-            client: getContextClient(),
-            query: gql`
-                mutation ($configName: String!, $configValue: String!) {
-                    updateConfiguration(name: $configName, value: $configValue)
-                }
-            `,
-            variables: { configName, configValue },
+    // Force refresh list with existing unchanged variables (== usually would not trigger reactivity)
+    export function refresh() {
+        queryStore({
+            client: client,
+            query: query,
+            variables: { paging, sorting, filter },
+            requestPolicy: 'network-only'
         });
     }
 
-    const updateConfiguration = ({ value, page }) => {
-        configValue = value; // Trigger mutation
-        paging = { itemsPerPage: value, page: page }; // Trigger reload of jobList
-    };
-
-    // $: $jobs.variables = { ...$jobs.variables, sorting, paging }
-    $: matchedJobs = $jobs.data != null ? $jobs.data.jobs.count : 0;
-
     // (Re-)query and optionally set new filters.
     export function update(filters) {
         if (filters != null) {
@@ -116,26 +105,39 @@
             if (minRunningFor && minRunningFor > 0) {
                 filters.push({ minRunningFor });
             }
-
             filter = filters;
         }
-
         page = 1;
         paging = paging = { page, itemsPerPage };
     }
 
-    // Force refresh list with existing unchanged variables (== usually would not trigger reactivity)
-    export function refresh() {
-        queryStore({
-                client,
-                query,
-                variables: { paging, sorting, filter },
-                requestPolicy: 'network-only'
-            });
+    const updateConfigurationMutation = ({ name, value }) => {
+        return mutationStore({
+            client: client,
+            query: gql`
+                mutation ($name: String!, $value: String!) {
+                    updateConfiguration(name: $name, value: $value)
+                }
+            `,
+            variables: { name, value }
+        });
     }
 
+    function updateConfiguration(value, page) {
+        updateConfigurationMutation({ name: 'plot_list_jobsPerPage', value: value })
+        .subscribe(res => {
+            if (res.fetching === false && !res.error) {
+                paging = { itemsPerPage: value, page: page }; // Trigger reload of jobList
+            } else if (res.fetching === false && res.error) {
+                throw res.error
+                // console.log('Error on subscription: ' + res.error)
+            }
+        })
+    };
+
     let tableWidth = null;
     let jobInfoColumnWidth = 250;
+
     $: plotWidth = Math.floor(
         (tableWidth - jobInfoColumnWidth) / metrics.length - 10
     );
@@ -232,11 +234,10 @@
     totalItems={matchedJobs}
     on:update={({ detail }) => {
         if (detail.itemsPerPage != itemsPerPage) {
-            itemsPerPage = detail.itemsPerPage;
-            updateConfiguration({
-                value: itemsPerPage.toString(),
-                page: detail.page,
-            })
+            updateConfiguration(
+                detail.itemsPerPage.toString(),
+                detail.page
+            )
         } else {
             paging = { itemsPerPage: detail.itemsPerPage, page: detail.page }
         }