Fix relational data in client apps and use count for link fields in client apps

packages/standard-components/src/DataTable.svelte

@@ -20,6 +20,7 @@
   let sort = {}
   let sorted = []
   let schema = {}
+  let store = _bb.store
 
   $: cssVariables = {
     backgroundColor,
@@ -39,7 +40,7 @@
 
   onMount(async () => {
     if (!isEmpty(datasource)) {
-      data = await fetchData(datasource, _bb)
+      data = await fetchData(datasource, $store)
       if (data && data.length) {
         await fetchModel(data[0].modelId)
         headers = Object.keys(schema).filter(shouldDisplayField)
@@ -99,7 +100,7 @@
             {#if schema[header].type === 'attachment'}
               <AttachmentList files={row[header]} />
             {:else if schema[header].type === 'link'}
-              <td>{row[header]} related row(s)</td>
+              <td>{row[header].length} related row(s)</td>
             {:else}
               <td>{row[header] == null ? '' : row[header]}</td>
             {/if}

packages/standard-components/src/List.svelte

@@ -7,10 +7,11 @@
   export let datasource = []
 
   let target
+  let store = _bb.store
 
   onMount(async () => {
     if (!isEmpty(datasource)) {
-      const data = await fetchData(datasource, _bb)
+      const data = await fetchData(datasource, $store)
       _bb.attachChildren(target, {
         hydrate: false,
         context: data,

packages/standard-components/src/RowDetail.svelte

@@ -52,7 +52,9 @@
       const modelObj = await fetchModel(record.modelId)
       for (let key of Object.keys(modelObj.schema)) {
         if (modelObj.schema[key].type === "link") {
-          record[key] = Array.isArray(record[key]) ? record[key].length : 0
+          record[`${key}_count`] = Array.isArray(record[key])
+            ? record[key].length
+            : 0
         }
       }
 

packages/standard-components/src/fetchData.js

@@ -1,10 +1,10 @@
 import api from "./api"
 
-export default async function fetchData(datasource, _bb) {
+export default async function fetchData(datasource, store) {
   const { type, name } = datasource
 
   if (name) {
-    let records
+    let records = []
     if (type === "model") {
       records = await fetchModelData()
     } else if (type === "view") {
@@ -20,7 +20,9 @@ export default async function fetchData(datasource, _bb) {
       records.forEach(record => {
         for (let key of keys) {
           if (model.schema[key].type === "link") {
-            record[key] = Array.isArray(record[key]) ? record[key].length : 0
+            record[`${key}_count`] = Array.isArray(record[key])
+              ? record[key].length
+              : 0
           }
         }
       })
@@ -62,14 +64,10 @@ export default async function fetchData(datasource, _bb) {
   }
 
   async function fetchLinkedRecordsData() {
-    if (
-      !_bb.store.state ||
-      !_bb.store.state.data ||
-      !_bb.store.state.data._id
-    ) {
+    if (!store || !store.data || !store.data._id) {
       return []
     }
-    const QUERY_URL = `/api/${_bb.store.state.data.modelId}/${_bb.store.state.data._id}/enrich`
+    const QUERY_URL = `/api/${store.data.modelId}/${store.data._id}/enrich`
     const response = await api.get(QUERY_URL)
     const record = await response.json()
     return record[datasource.fieldName]