Start porting to new urql api

It compiles. Not tested

web/frontend/src/joblist/JobList.svelte

@@ -9,7 +9,7 @@
     - update(filters?: [JobFilter])
  -->
 <script>
-    import { operationStore, query, mutation } from '@urql/svelte'
+    import { queryStore, gql, getContextClient , mutationStore } from '@urql/svelte'
     import { getContext } from 'svelte';
     import { Row, Table, Card, Spinner } from 'sveltestrap'
     import Pagination from './Pagination.svelte'
@@ -29,11 +29,13 @@
     let paging = { itemsPerPage, page }
     let filter = []
 
-    const jobs = operationStore(`
-    query($filter: [JobFilter!]!, $sorting: OrderByInput!, $paging: PageRequest! ){
-        jobs(filter: $filter, order: $sorting, page: $paging) {
-            items {
-                id, jobId, user, project, jobName, cluster, subCluster, startTime,
+    const jobs = queryStore({
+        client: getContextClient(),
+        query: gql`
+        query($filter: [JobFilter!]!, $sorting: OrderByInput!, $paging: PageRequest! ){
+            jobs(filter: $filter, order: $sorting, page: $paging) {
+                items {
+                    id, jobId, user, project, jobName, cluster, subCluster, startTime,
                 duration, numNodes, numHWThreads, numAcc, walltime, resources { hostname },
                 SMT, exclusive, partition, arrayJobId,
                 monitoringStatus, state,
@@ -43,19 +45,20 @@
             }
             count
         }
-    }`, {
-        paging,
-        sorting,
-        filter,
-    }, {
-        pause: true
+    }`,
+    variables: { paging, sorting, filter },
+    pause: true
     })
 
-    const updateConfiguration = mutation({
-        query: `mutation($name: String!, $value: String!) {
+    const updateConfiguration = ({ name, value }) => {
+    result = mutationStore({
+        client: getContextClient(),
+        query: gql`mutation($name: String!, $value: String!) {
             updateConfiguration(name: $name, value: $value)
-        }`
+        }`,
+        variables: {name, value}
     })
+    }
 
     $: $jobs.variables = { ...$jobs.variables, sorting, paging }
     $: matchedJobs = $jobs.data != null ? $jobs.data.jobs.count : 0

web/frontend/src/joblist/Row.svelte

@@ -9,7 +9,7 @@
  -->
 
 <script>
-    import { operationStore, query } from '@urql/svelte'
+    import { queryStore, gql, getContextClient } from '@urql/svelte'
     import { getContext } from 'svelte'
     import { Card, Spinner } from 'sveltestrap'
     import MetricPlot from '../plots/MetricPlot.svelte'
@@ -26,7 +26,10 @@
     const cluster = getContext('clusters').find(c => c.name == job.cluster)
     // Get all MetricConfs which include subCluster-specific settings for this job
     const metricConfig = getContext('metrics')
-    const metricsQuery = operationStore(`query($id: ID!, $metrics: [String!]!, $scopes: [MetricScope!]!) {
+    const metricsQuery = queryStore({
+        client: getContextClient(),
+        query: gql`
+        query($id: ID!, $metrics: [String!]!, $scopes: [MetricScope!]!) {
         jobMetrics(id: $id, metrics: $metrics, scopes: $scopes) {
             name
             scope
@@ -39,10 +42,12 @@
                 }
             }
         }
-    }`, {
+    }`,
+    pause: true,
+    variables: {
         id: job.id,
         metrics,
-        scopes
+        scopes}
     })
 
     const selectScope = (jobMetrics) => jobMetrics.reduce(
@@ -91,7 +96,7 @@
     $: metricsQuery.variables = { id: job.id, metrics, scopes }
 
     if (job.monitoringStatus)
-        query(metricsQuery)
+        $metricsQuery.resume()
 </script>
 
 <tr>