diff --git a/web/frontend/src/Analysis.root.svelte b/web/frontend/src/Analysis.root.svelte
index e6dba50..49bfb3a 100644
--- a/web/frontend/src/Analysis.root.svelte
+++ b/web/frontend/src/Analysis.root.svelte
@@ -1,7 +1,7 @@
 <script>
     import { init } from './utils.js'
     import { getContext, onMount } from 'svelte'
-    import { operationStore, query } from '@urql/svelte'
+    import { queryStore, gql, getContextClient  } from '@urql/svelte'
     import { Row, Col, Spinner, Card, Table } from 'sveltestrap'
     import Filters from './filters/Filters.svelte'
     import PlotSelection from './PlotSelection.svelte'
@@ -50,7 +50,9 @@
         }
     })
 
-    const statsQuery = operationStore(`
+    const statsQuery = queryStore({
+        client: getContextClient(),
+        query: gql`
         query($filter: [JobFilter!]!) {
             stats: jobsStatistics(filter: $filter) {
                 totalJobs
@@ -63,33 +65,38 @@
 
             topUsers: jobsCount(filter: $filter, groupBy: USER, weight: NODE_HOURS, limit: 5) { name, count }
         }
-    `, { filter: [] }, { pause: true })
+    `, 
+    variables: { filter: [] },
+    pause: true 
+    })
 
-    const footprintsQuery = operationStore(`
+    const footprintsQuery = queryStore({
+        client: getContextClient(),
+        query: gql`
         query($filter: [JobFilter!]!, $metrics: [String!]!) {
             footprints: jobsFootprints(filter: $filter, metrics: $metrics) {
                 nodehours,
                 metrics { metric, data }
             }
-        }
-    `, { filter: [], metrics }, { pause: true })
+        }`,
+    variables:  { filter: [], metrics },
+    pause: true
+    })
     $: $footprintsQuery.variables = { ...$footprintsQuery.variables, metrics }
 
-    const rooflineQuery = operationStore(`
+    const rooflineQuery = queryStore({
+        client: getContextClient(),
+        query: gql`
         query($filter: [JobFilter!]!, $rows: Int!, $cols: Int!,
                 $minX: Float!, $minY: Float!, $maxX: Float!, $maxY: Float!) {
             rooflineHeatmap(filter: $filter, rows: $rows, cols: $cols,
                     minX: $minX, minY: $minY, maxX: $maxX, maxY: $maxY)
         }
-    `, {
-        filter: [],
-        rows: 50, cols: 50,
-        minX: 0.01, minY: 1., maxX: 1000., maxY: -1.
-    }, { pause: true });
+    `,
+    variables: { filter: [], rows: 50, cols: 50, minX: 0.01, minY: 1., maxX: 1000., maxY: -1. },
+    pause: true
+    })
 
-    query(statsQuery)
-    query(footprintsQuery)
-    query(rooflineQuery)
     onMount(() => filters.update())
 </script>
 
diff --git a/web/frontend/src/List.root.svelte b/web/frontend/src/List.root.svelte
index 5eb36ae..2aadba4 100644
--- a/web/frontend/src/List.root.svelte
+++ b/web/frontend/src/List.root.svelte
@@ -2,22 +2,28 @@
     @component List of users or projects
  -->
 <script>
-    import { onMount } from 'svelte'
-    import { init } from './utils.js'
-    import { Row, Col, Button, Icon, Table, Card, Spinner,
-             InputGroup, Input } from 'sveltestrap'
-    import Filters from './filters/Filters.svelte'
-    import { operationStore, query } from '@urql/svelte';
-    import { scramble, scrambleNames } from './joblist/JobInfo.svelte'
+    import { onMount } from "svelte";
+    import { init } from "./utils.js";
+    import { Row, Col, Button, Icon, Table,
+        Card, Spinner, InputGroup, Input, } from "sveltestrap";
+    import Filters from "./filters/Filters.svelte";
+    import { queryStore, gql, getContextClient } from "@urql/svelte";
+    import { scramble, scrambleNames } from "./joblist/JobInfo.svelte";
 
-    const { } = init()
+    const {} = init();
 
-    export let type
-    export let filterPresets
+    export let type;
+    export let filterPresets;
 
-    console.assert(type == 'USER' || type == 'PROJECT', 'Invalid list type provided!')
+    console.assert(
+        type == "USER" || type == "PROJECT",
+        "Invalid list type provided!"
+    );
 
-    const stats = operationStore(`query($filter: [JobFilter!]!) {
+    const stats = queryStore({
+        client: getContextClient(),
+        query: gql`
+        query($filter: [JobFilter!]!) {
         rows: jobsStatistics(filter: $filter, groupBy: ${type}) {
             id
             name
@@ -25,41 +31,39 @@
             totalWalltime
             totalCoreHours
         }
-    }`, {
-        filter: []
-    }, {
-        pause: true
-    })
+    }`,
+        variables: { filter, type },
+    });
 
-    query(stats)
-
-    let filters
-    let nameFilter = ''
-    let sorting = { field: 'totalJobs', direction: 'down' }
+    let filters;
+    let nameFilter = "";
+    let sorting = { field: "totalJobs", direction: "down" };
 
     function changeSorting(event, field) {
-        let target = event.target
-        while (target.tagName != 'BUTTON')
-            target = target.parentElement
+        let target = event.target;
+        while (target.tagName != "BUTTON") target = target.parentElement;
 
-        let direction = target.children[0].className.includes('up') ? 'down' : 'up'
-        target.children[0].className = `bi-sort-numeric-${direction}`
-        sorting = { field, direction }
+        let direction = target.children[0].className.includes("up")
+            ? "down"
+            : "up";
+        target.children[0].className = `bi-sort-numeric-${direction}`;
+        sorting = { field, direction };
     }
 
     function sort(stats, sorting, nameFilter) {
-        const cmp = sorting.field == 'id'
-            ? (sorting.direction == 'up'
-                ? (a, b) => a.id < b.id
-                : (a, b) => a.id > b.id)
-            : (sorting.direction == 'up'
+        const cmp =
+            sorting.field == "id"
+                ? sorting.direction == "up"
+                    ? (a, b) => a.id < b.id
+                    : (a, b) => a.id > b.id
+                : sorting.direction == "up"
                 ? (a, b) => a[sorting.field] - b[sorting.field]
-                : (a, b) => b[sorting.field] - a[sorting.field])
+                : (a, b) => b[sorting.field] - a[sorting.field];
 
-        return stats.filter(u => u.id.includes(nameFilter)).sort(cmp)
+        return stats.filter((u) => u.id.includes(nameFilter)).sort(cmp);
     }
 
-    onMount(() => filters.update())
+    onMount(() => filters.update());
 </script>
 
 <Row>
@@ -68,59 +72,85 @@
             <Button disabled outline>
                 Search {type.toLowerCase()}s
             </Button>
-            <Input bind:value={nameFilter} placeholder="Filter by {({ USER: 'username', PROJECT: 'project' })[type]}" />
+            <Input
+                bind:value={nameFilter}
+                placeholder="Filter by {{
+                    USER: 'username',
+                    PROJECT: 'project',
+                }[type]}"
+            />
         </InputGroup>
     </Col>
     <Col xs="auto">
         <Filters
             bind:this={filters}
-            filterPresets={filterPresets}
+            {filterPresets}
             startTimeQuickSelect={true}
             menuText="Only {type.toLowerCase()}s with jobs that match the filters will show up"
             on:update={({ detail }) => {
-                $stats.variables = { filter: detail.filters }
-                $stats.context.pause = false
-                $stats.reexecute()
-            }} />
+                $stats.variables = { filter: detail.filters };
+                $stats.context.pause = false;
+                $stats.reexecute();
+            }}
+        />
     </Col>
 </Row>
 <Table>
     <thead>
         <tr>
             <th scope="col">
-                {({ USER: 'Username', PROJECT: 'Project Name' })[type]}
-                <Button color="{sorting.field == 'id' ? 'primary' : 'light'}"
-                    size="sm" on:click={e => changeSorting(e, 'id')}>
+                {({ USER: "Username", PROJECT: "Project Name" })[type]}
+                <Button
+                    color={sorting.field == "id" ? "primary" : "light"}
+                    size="sm"
+                    on:click={(e) => changeSorting(e, "id")}
+                >
                     <Icon name="sort-numeric-down" />
                 </Button>
             </th>
-            {#if type == 'USER'}
+            {#if type == "USER"}
                 <th scope="col">
                     Name
-                    <Button color="{sorting.field == 'name' ? 'primary' : 'light'}"
-                        size="sm" on:click={e => changeSorting(e, 'name')}>
+                    <Button
+                        color={sorting.field == "name" ? "primary" : "light"}
+                        size="sm"
+                        on:click={(e) => changeSorting(e, "name")}
+                    >
                         <Icon name="sort-numeric-down" />
                     </Button>
                 </th>
             {/if}
             <th scope="col">
                 Total Jobs
-                <Button color="{sorting.field == 'totalJobs' ? 'primary' : 'light'}"
-                    size="sm" on:click={e => changeSorting(e, 'totalJobs')}>
+                <Button
+                    color={sorting.field == "totalJobs" ? "primary" : "light"}
+                    size="sm"
+                    on:click={(e) => changeSorting(e, "totalJobs")}
+                >
                     <Icon name="sort-numeric-down" />
                 </Button>
             </th>
             <th scope="col">
                 Total Walltime
-                <Button color="{sorting.field == 'totalWalltime' ? 'primary' : 'light'}"
-                    size="sm" on:click={e => changeSorting(e, 'totalWalltime')}>
+                <Button
+                    color={sorting.field == "totalWalltime"
+                        ? "primary"
+                        : "light"}
+                    size="sm"
+                    on:click={(e) => changeSorting(e, "totalWalltime")}
+                >
                     <Icon name="sort-numeric-down" />
                 </Button>
             </th>
             <th scope="col">
                 Total Core Hours
-                <Button color="{sorting.field == 'totalCoreHours' ? 'primary' : 'light'}"
-                    size="sm" on:click={e => changeSorting(e, 'totalCoreHours')}>
+                <Button
+                    color={sorting.field == "totalCoreHours"
+                        ? "primary"
+                        : "light"}
+                    size="sm"
+                    on:click={(e) => changeSorting(e, "totalCoreHours")}
+                >
                     <Icon name="sort-numeric-down" />
                 </Button>
             </th>
@@ -129,26 +159,36 @@
     <tbody>
         {#if $stats.fetching}
             <tr>
-                <td colspan="4" style="text-align: center;"><Spinner secondary/></td>
+                <td colspan="4" style="text-align: center;"
+                    ><Spinner secondary /></td
+                >
             </tr>
         {:else if $stats.error}
             <tr>
-                <td colspan="4"><Card body color="danger" class="mb-3">{$stats.error.message}</Card></td>
+                <td colspan="4"
+                    ><Card body color="danger" class="mb-3"
+                        >{$stats.error.message}</Card
+                    ></td
+                >
             </tr>
         {:else if $stats.data}
             {#each sort($stats.data.rows, sorting, nameFilter) as row (row.id)}
                 <tr>
                     <td>
-                        {#if type == 'USER'}
-                            <a href="/monitoring/user/{row.id}">{scrambleNames ? scramble(row.id) : row.id}</a>
-                        {:else if type == 'PROJECT'}
-                            <a href="/monitoring/jobs/?project={row.id}">{row.id}</a>
+                        {#if type == "USER"}
+                            <a href="/monitoring/user/{row.id}"
+                                >{scrambleNames ? scramble(row.id) : row.id}</a
+                            >
+                        {:else if type == "PROJECT"}
+                            <a href="/monitoring/jobs/?project={row.id}"
+                                >{row.id}</a
+                            >
                         {:else}
                             {row.id}
                         {/if}
                     </td>
-                    {#if type == 'USER'}
-                        <td>{row?.name ? row.name : ''}</td>
+                    {#if type == "USER"}
+                        <td>{row?.name ? row.name : ""}</td>
                     {/if}
                     <td>{row.totalJobs}</td>
                     <td>{row.totalWalltime}</td>
@@ -156,7 +196,9 @@
                 </tr>
             {:else}
                 <tr>
-                    <td colspan="4"><i>No {type.toLowerCase()}s/jobs found</i></td>
+                    <td colspan="4"
+                        ><i>No {type.toLowerCase()}s/jobs found</i></td
+                    >
                 </tr>
             {/each}
         {/if}
diff --git a/web/frontend/src/MetricSelection.svelte b/web/frontend/src/MetricSelection.svelte
index 3397afd..56df34d 100644
--- a/web/frontend/src/MetricSelection.svelte
+++ b/web/frontend/src/MetricSelection.svelte
@@ -10,7 +10,7 @@
 <script>
     import  { Modal, ModalBody, ModalHeader, ModalFooter, Button, ListGroup } from 'sveltestrap'
     import { getContext } from 'svelte'
-    import { mutation } from '@urql/svelte'
+    import { gql, getContextClient , mutationStore  } from '@urql/svelte'
 
     export let metrics
     export let isOpen
@@ -53,11 +53,15 @@
         }
     }
 
-    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}
     })
+    }
 
     let columnHovering = null
 
diff --git a/web/frontend/src/Node.root.svelte b/web/frontend/src/Node.root.svelte
index ecfab70..6261a28 100644
--- a/web/frontend/src/Node.root.svelte
+++ b/web/frontend/src/Node.root.svelte
@@ -1,7 +1,7 @@
 <script>
     import { init } from './utils.js'
     import { Row, Col, InputGroup, InputGroupText, Icon, Spinner, Card } from 'sveltestrap'
-    import { operationStore, query } from '@urql/svelte'
+    import { queryStore, gql, getContextClient } from '@urql/svelte'
     import TimeSelection from './filters/TimeSelection.svelte'
     import PlotTable from './PlotTable.svelte'
     import MetricPlot from './plots/MetricPlot.svelte'
@@ -23,7 +23,9 @@
     const ccconfig = getContext('cc-config')
     const clusters = getContext('clusters')
 
-    const nodesQuery = operationStore(`query($cluster: String!, $nodes: [String!], $from: Time!, $to: Time!) {
+    const nodesQuery = queryStore({
+        client: getContextClient(),
+        query: gql`query($cluster: String!, $nodes: [String!], $from: Time!, $to: Time!) {
         nodeMetrics(cluster: $cluster, nodes: $nodes, from: $from, to: $to) {
             host
             subCluster
@@ -40,11 +42,12 @@
                 }
             }
         }
-    }`, {
+    }`,
+    variables: {
         cluster: cluster,
         nodes: [hostname],
         from: from.toISOString(),
-        to: to.toISOString()
+        to: to.toISOString() }
     })
 
     $: $nodesQuery.variables = { cluster, nodes: [hostname], from: from.toISOString(), to: to.toISOString() }
@@ -59,9 +62,6 @@
             }
         }
     }
-
-    query(nodesQuery)
-
     // $: console.log($nodesQuery?.data?.nodeMetrics[0].metrics)
 </script>
 
diff --git a/web/frontend/src/PlotSelection.svelte b/web/frontend/src/PlotSelection.svelte
index 0205c27..74e7fba 100644
--- a/web/frontend/src/PlotSelection.svelte
+++ b/web/frontend/src/PlotSelection.svelte
@@ -1,17 +1,21 @@
 <script>
     import { Modal, ModalBody, ModalHeader, ModalFooter, InputGroup,
              Button, ListGroup, ListGroupItem, Icon } from 'sveltestrap'
-    import { mutation } from '@urql/svelte'
+    import { gql, getContextClient , mutationStore } from '@urql/svelte'
 
     export let availableMetrics
     export let metricsInHistograms
     export let metricsInScatterplots
 
-    const updateConfigurationMutation = mutation({
-        query: `mutation($name: String!, $value: String!) {
+    const updateConfigurationMutation = ({ name, value }) => {
+    result = mutationStore({
+        client: getContextClient(),
+        query: gql`mutation($name: String!, $value: String!) {
             updateConfiguration(name: $name, value: $value)
-        }`
+        }`,
+        variables: { name, value }
     })
+    }
 
     let isHistogramConfigOpen = false, isScatterPlotConfigOpen = false
     let selectedMetric1 = null, selectedMetric2 = null
diff --git a/web/frontend/src/Status.root.svelte b/web/frontend/src/Status.root.svelte
index 60dcb51..00d4179 100644
--- a/web/frontend/src/Status.root.svelte
+++ b/web/frontend/src/Status.root.svelte
@@ -4,7 +4,7 @@
     import Histogram from './plots/Histogram.svelte'
     import { Row, Col, Spinner, Card, CardHeader, CardTitle, CardBody, Table, Progress, Icon } from 'sveltestrap'
     import { init } from './utils.js'
-    import { operationStore, query } from '@urql/svelte'
+    import { queryStore, gql, getContextClient  } from '@urql/svelte'
 
     const { query: initq } = init()
 
@@ -13,7 +13,9 @@
     let plotWidths = [], colWidth1 = 0, colWidth2
 
     let from = new Date(Date.now() - 5 * 60 * 1000), to = new Date(Date.now())
-    const mainQuery = operationStore(`query($cluster: String!, $filter: [JobFilter!]!, $metrics: [String!], $from: Time!, $to: Time!) {
+    const mainQuery = queryStore({
+        client: getContextClient(),
+        query: gql`query($cluster: String!, $filter: [JobFilter!]!, $metrics: [String!], $from: Time!, $to: Time!) {
         nodeMetrics(cluster: $cluster, metrics: $metrics, from: $from, to: $to) {
             host
             subCluster
@@ -36,12 +38,11 @@
         allocatedNodes(cluster: $cluster)                                                        { name, count }
         topUsers:    jobsCount(filter: $filter, groupBy: USER,    weight: NODE_COUNT, limit: 10) { name, count }
         topProjects: jobsCount(filter: $filter, groupBy: PROJECT, weight: NODE_COUNT, limit: 10) { name, count }
-    }`, {
-        cluster: cluster,
-        metrics: ['flops_any', 'mem_bw'],
-        from: from.toISOString(),
-        to: to.toISOString(),
+    }`,
+    variables: {
+         cluster: cluster, metrics: ['flops_any', 'mem_bw'], from: from.toISOString(), to: to.toISOString(),
         filter: [{ state: ['running'] }, { cluster: { eq: cluster } }]
+    }
     })
 
     const sumUp = (data, subcluster, metric) => data.reduce((sum, node) => node.subCluster == subcluster
diff --git a/web/frontend/src/Systems.root.svelte b/web/frontend/src/Systems.root.svelte
index 93fa2f4..9fd6107 100644
--- a/web/frontend/src/Systems.root.svelte
+++ b/web/frontend/src/Systems.root.svelte
@@ -1,7 +1,7 @@
 <script>
     import { init } from './utils.js'
     import { Row, Col, Input, InputGroup, InputGroupText, Icon, Spinner, Card } from 'sveltestrap'
-    import { operationStore, query } from '@urql/svelte'
+    import { queryStore, gql, getContextClient } from '@urql/svelte'
     import TimeSelection from './filters/TimeSelection.svelte'
     import PlotTable from './PlotTable.svelte'
     import MetricPlot from './plots/MetricPlot.svelte'
@@ -27,7 +27,9 @@
     let hostnameFilter = ''
     let selectedMetric = ccconfig.system_view_selectedMetric
 
-    const nodesQuery = operationStore(`query($cluster: String!, $metrics: [String!], $from: Time!, $to: Time!) {
+    const nodesQuery = queryStore({
+        client: getContextClient(),
+        query: gql`query($cluster: String!, $metrics: [String!], $from: Time!, $to: Time!) {
         nodeMetrics(cluster: $cluster, metrics: $metrics, from: $from, to: $to) {
             host
             subCluster
@@ -44,11 +46,12 @@
                 }
             }
         }
-    }`, {
+    }`,
+    variables: {
         cluster: cluster,
         metrics: [],
         from: from.toISOString(),
-        to: to.toISOString()
+        to: to.toISOString()}
     })
 
     let metricUnits = {}
@@ -64,8 +67,6 @@
     }
 
     $: $nodesQuery.variables = { cluster, metrics: [selectedMetric], from: from.toISOString(), to: to.toISOString() }
-
-    query(nodesQuery)
 </script>
 
 <Row>
diff --git a/web/frontend/src/TagManagement.svelte b/web/frontend/src/TagManagement.svelte
index 747b092..296f748 100644
--- a/web/frontend/src/TagManagement.svelte
+++ b/web/frontend/src/TagManagement.svelte
@@ -1,6 +1,6 @@
 <script>
     import { getContext } from 'svelte'
-    import { mutation } from '@urql/svelte'
+    import { gql, getContextClient , mutationStore } from '@urql/svelte'
     import { Icon, Button, ListGroupItem, Spinner, Modal, Input,
              ModalBody, ModalHeader, ModalFooter, Alert } from 'sveltestrap'
     import { fuzzySearchTags } from './utils.js'
@@ -15,23 +15,34 @@
     let pendingChange = false
     let isOpen = false
 
-    const createTagMutation = mutation({
-        query: `mutation($type: String!, $name: String!) {
+    const createTagMutation = ({ type, name }) => {
+    result = mutationStore({
+        client: getContextClient(),
+        query: gql`mutation($type: String!, $name: String!) {
             createTag(type: $type, name: $name) { id, type, name }
-        }`
+        }`,
+        variables: { type, name}
     })
+    }
 
-    const addTagsToJobMutation = mutation({
-        query: `mutation($job: ID!, $tagIds: [ID!]!) {
+    const addTagsToJobMutation = ({ job, tagIds }) => {
+    result = mutationStore({
+        client: getContextClient(),
+        query: gql`mutation($job: ID!, $tagIds: [ID!]!) {
             addTagsToJob(job: $job, tagIds: $tagIds) { id, type, name }
-        }`
+        }`,
+        variables: {job, tagIds}
     })
+    }
 
-    const removeTagsFromJobMutation = mutation({
-        query: `mutation($job: ID!, $tagIds: [ID!]!) {
+    const removeTagsFromJobMutation = ({ job, tagIds }) => {
+    result = mutationStore({
+        client: getContextClient(),
+        query: gql`mutation($job: ID!, $tagIds: [ID!]!) {
             removeTagsFromJob(job: $job, tagIds: $tagIds) { id, type, name }
         }`
     })
+    }
 
     let allTagsFiltered // $initialized is in there because when it becomes true, allTags is initailzed.
     $: allTagsFiltered = ($initialized, fuzzySearchTags(filterTerm, allTags))
diff --git a/web/frontend/src/User.root.svelte b/web/frontend/src/User.root.svelte
index 5021017..4da00d0 100644
--- a/web/frontend/src/User.root.svelte
+++ b/web/frontend/src/User.root.svelte
@@ -2,7 +2,7 @@
     import { onMount, getContext } from 'svelte'
     import { init } from './utils.js'
     import { Table, Row, Col, Button, Icon, Card, Spinner } from 'sveltestrap'
-    import { operationStore, query } from '@urql/svelte'
+    import { queryStore, gql, getContextClient } from '@urql/svelte'
     import Filters from './filters/Filters.svelte'
     import JobList from './joblist/JobList.svelte'
     import Sorting from './joblist/SortSelection.svelte'
@@ -25,8 +25,10 @@
     let w1, w2, histogramHeight = 250
     let selectedCluster = filterPresets?.cluster ? filterPresets.cluster : null
 
-    const stats = operationStore(`
-    query($filter: [JobFilter!]!) {
+    const stats = queryStore({
+        client: getContextClient(),
+        query: gql`
+        query($filter: [JobFilter!]!) {
         jobsStatistics(filter: $filter) {
             totalJobs
             shortJobs
@@ -35,10 +37,10 @@
             histDuration { count, value }
             histNumNodes { count, value }
         }
-    }
-    `, {
+    }`,
+    variables: {
         filter: []
-    }, {
+    },
         pause: true
     })
 
diff --git a/web/frontend/src/joblist/JobList.svelte b/web/frontend/src/joblist/JobList.svelte
index 0bd5bc5..287fe1b 100644
--- a/web/frontend/src/joblist/JobList.svelte
+++ b/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
diff --git a/web/frontend/src/joblist/Row.svelte b/web/frontend/src/joblist/Row.svelte
index 3ba8341..aa8eb4f 100644
--- a/web/frontend/src/joblist/Row.svelte
+++ b/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>
diff --git a/web/frontend/src/utils.js b/web/frontend/src/utils.js
index f1f76cd..05a7e8b 100644
--- a/web/frontend/src/utils.js
+++ b/web/frontend/src/utils.js
@@ -1,5 +1,5 @@
 import { expiringCacheExchange } from './cache-exchange.js'
-import { Client, fetchExchange } from '@urql/svelte';
+import { Client, setContextClient, fetchExchange } from '@urql/svelte';
 import { setContext, getContext, hasContext, onDestroy, tick } from 'svelte'
 import { readable } from 'svelte/store'
 
@@ -32,6 +32,8 @@ export function init(extraInitQuery = '') {
         ]
     })
 
+    setContextClient(client)
+
     const query = client.query(`query {
         clusters {
             name,