Update builder socket to ignore own events, and ensure table creation updates state without depending on the websocket

packages/builder/src/builderStore/websocket.js

@@ -15,25 +15,23 @@ export const createBuilderWebsocket = appId => {
   socket.on("connect_error", err => {
     console.log("Failed to connect to builder websocket:", err.message)
   })
-
-  // User events
-  socket.on(SocketEvent.UserUpdate, userStore.actions.updateUser)
-  socket.on(SocketEvent.UserDisconnect, userStore.actions.removeUser)
-
-  // Table events
-  socket.on(BuilderSocketEvent.TableChange, ({ id, table }) => {
-    tables.replaceTable(id, table)
-  })
-
-  // Datasource events
-  socket.on(BuilderSocketEvent.DatasourceChange, ({ id, datasource }) => {
-    datasources.replaceDatasource(id, datasource)
-  })
-
-  // Clean up user store on disconnect
   socket.on("disconnect", () => {
     userStore.actions.reset()
   })
 
+  // User events
+  socket.onOther(SocketEvent.UserUpdate, userStore.actions.updateUser)
+  socket.onOther(SocketEvent.UserDisconnect, userStore.actions.removeUser)
+
+  // Table events
+  socket.onOther(BuilderSocketEvent.TableChange, ({ id, table }) => {
+    tables.replaceTable(id, table)
+  })
+
+  // Datasource events
+  socket.onOther(BuilderSocketEvent.DatasourceChange, ({ id, datasource }) => {
+    datasources.replaceDatasource(id, datasource)
+  })
+
   return socket
 }

packages/builder/src/stores/backend/tables.js

@@ -62,7 +62,7 @@ export function createTablesStore() {
     }
 
     const savedTable = await API.saveTable(updatedTable)
-    replaceTable(table._id, savedTable)
+    replaceTable(savedTable._id, savedTable)
     await datasources.fetch()
     select(savedTable._id)
     return savedTable