fixes issues with queries not getting selected correctly

packages/builder/src/builderStore/store/backend/queries.js

@@ -49,6 +49,7 @@ function createQueriesStore() {
       return json
     },
     select: query => {
+      update(state => ({ ...state, selected: query._id }))
       datasources.update(state => ({ ...state, selected: query.datasourceId }))
     },
     delete: async query => {

packages/builder/src/components/backend/DatasourceNavigator/DatasourceNavigator.svelte

@@ -24,6 +24,8 @@
     datasources.fetch()
     queries.fetch()
   })
+
+  $: console.log($queries)
 </script>
 
 {#if $database?._id}

packages/builder/src/pages/[application]/data/datasource/[selectedDatasource]/[query]/index.svelte

@@ -1,7 +1,6 @@
 <script>
   import { params } from "@sveltech/routify"
-  import { backendUiStore } from "builderStore"
-  import { queries } from 'builderStore/store/backend/'
+  import { database, queries } from 'builderStore/store/backend/'
   import QueryInterface from "components/integration/QueryViewer.svelte"
 
   async function fetchQueryConfig() {
@@ -16,7 +15,7 @@
   }
 
   $: selectedQuery = $queries.list.find(
-    query => query._id === $backendUiStore.selectedQueryId
+    query => query._id === $queries.selected
   ) || {
     datasourceId: $params.selectedDatasource,
     parameters: [],
@@ -27,7 +26,7 @@
 
 <section>
   <div class="inner">
-    {#if $backendUiStore.selectedDatabase._id && selectedQuery}
+    {#if $database._id && selectedQuery}
       <QueryInterface query={selectedQuery} />
     {/if}
   </div>