Fetch

packages/builder/src/pages/builder/app/[application]/data/view/v2/[id]/_layout.svelte

@@ -0,0 +1,28 @@
+<script>
+  import { views } from "stores/backend"
+  import { syncURLToState } from "helpers/urlStateSync"
+  import * as routify from "@roxi/routify"
+  import { onDestroy } from "svelte"
+  import { store } from "builderStore"
+
+  $: viewName = $views.selectedViewName
+  $: store.actions.websocket.selectResource(viewName)
+
+  const stopSyncing = syncURLToState({
+    urlParam: "id",
+    stateKey: "selectedViewId",
+    validate: id => $views.list?.some(view => view._id === id),
+    update: id => {
+      const view = $views.list.find(v => v._id === id)
+      views.select(view.name)
+    },
+    fallbackUrl: "../",
+    store: views,
+    routify,
+    decode: decodeURIComponent,
+  })
+
+  onDestroy(stopSyncing)
+</script>
+
+<slot />

packages/builder/src/pages/builder/app/[application]/data/view/v2/[id].svelte → packages/builder/src/pages/builder/app/[application]/data/view/v2/[id]/index.svelte

@@ -1,15 +1,15 @@
 <script>
-  import { views } from "stores/backend"
-  import { Grid } from "@budibase/frontend-core"
   import { API } from "api"
+  import { Grid } from "@budibase/frontend-core"
+  import { views } from "stores/backend"
 
-  export let id
+  $: selectedView = $views.selected
 </script>
 
 <div class="wrapper">
   <Grid
     {API}
-    tableId={id}
+    tableId={selectedView?._id}
     datasourceType="viewV2"
     showAvatars={false}
     showControls={false}