Fix fetching of relationship data in lists

6 years ago · 3dcd9d32e2
7 changed files with 16 additions and 13 deletions
--- a/packages/builder/src/components/userInterface/AppPreview/iframeTemplate.js
+++ b/packages/builder/src/components/userInterface/AppPreview/iframeTemplate.js
@ -55,7 +55,7 @@ export default `<html>

        window["##BUDIBASE_FRONTEND_DEFINITION##"] = data.frontendDefinition;
        if (window.loadBudibase) {
-          loadBudibase({ window, localStorage })
+          loadBudibase()
        }
      }
      let styles
--- a/packages/client/src/api/datasources.js
+++ b/packages/client/src/api/datasources.js
@ -6,20 +6,24 @@ import { enrichRows } from "./rows"
 /**
 * Fetches all rows for a particular Budibase data source.
 */
-export const fetchDatasource = async datasource => {
+export const fetchDatasource = async (datasource, context) => {
  if (!datasource || !datasource.type) {
    return []
  }

  // Fetch all rows in data source
-  const { type, tableId } = datasource
+  const { type, tableId, fieldName } = datasource
  let rows = []
  if (type === "table") {
    rows = await fetchTableData(tableId)
  } else if (type === "view") {
    rows = await fetchViewData(datasource)
  } else if (type === "link") {
-    rows = await fetchRelationshipData(tableId)
+    rows = await fetchRelationshipData({
+      tableId: context?.row?.tableId,
+      fieldName,
+      rowId: context?.row?._id,
+    })
  }

  // Enrich rows
--- a/packages/client/src/api/relationships.js
+++ b/packages/client/src/api/relationships.js
@ -5,7 +5,7 @@ import { enrichRows } from "./rows"
 * Fetches related rows for a certain field of a certain row.
 */
 export const fetchRelationshipData = async ({ tableId, rowId, fieldName }) => {
-  if (!tableId || !rowId) {
+  if (!tableId || !rowId || !fieldName) {
    return []
  }
  const response = await api.get({ url: `/api/${tableId}/${rowId}/enrich` })
--- a/packages/client/src/components/Router.svelte
+++ b/packages/client/src/components/Router.svelte
@ -8,11 +8,7 @@
  export let styles
  let routes

-  onMount(() => {
-    initialiseRouter()
-  })
-
-  const initialiseRouter = async () => {
+  onMount(async () => {
    await routeStore.actions.fetchRoutes()
    await screenStore.actions.fetchScreens()
    routes = {}
@ -22,7 +18,7 @@

    // Add catch-all route so that we serve the Screen component always
    routes["*"] = Screen
-  }
+  })

  function onRouteLoading({ detail }) {
    routeStore.actions.setActiveRoute(detail.route)
--- a/packages/client/src/utils/enrichDataBinding.js
+++ b/packages/client/src/utils/enrichDataBinding.js
@ -28,5 +28,6 @@ export default (input, context) => {
  if (!looksLikeMustache.test(input)) {
    return input
  }
+  console.log(input)
  return mustache.render(input, context)
 }
--- a/packages/standard-components/src/List.svelte
+++ b/packages/standard-components/src/List.svelte
@ -4,6 +4,7 @@
  import DataProvider from "./DataProvider.svelte"

  const { API, styleable } = getContext("app")
+  const dataContext = getContext("data")

  export let datasource = []
  export let styles
@ -12,7 +13,7 @@

  onMount(async () => {
    if (!isEmpty(datasource)) {
-      rows = await API.fetchDatasource(datasource)
+      rows = await API.fetchDatasource(datasource, $dataContext)
    }
  })
 </script>
--- a/packages/standard-components/src/charts/LineChart.svelte
+++ b/packages/standard-components/src/charts/LineChart.svelte
@ -5,6 +5,7 @@
  import { isEmpty } from "lodash/fp"

  const { API } = getContext("app")
+  const dataContext = getContext("data")

  // Common props
  export let title
@ -41,7 +42,7 @@

    // Fetch, filter and sort data
    const schema = (await API.fetchTableDefinition(datasource.tableId)).schema
-    const result = await API.fetchDatasource(datasource)
+    const result = await API.fetchDatasource(datasource, $dataContext)
    const reducer = row => (valid, column) => valid && row[column] != null
    const hasAllColumns = row => allCols.reduce(reducer(row), true)
    const data = result