fix: invalidate react after update reference field

undb-io · Oct 8, 2024 · f152074 · f152074
1 parent fcb08c2
commit f152074
Show file tree

Hide file tree

Showing 7 changed files with 43 additions and 13 deletions.
diff --git a/apps/frontend/src/lib/components/blocks/grid-view/editable-cell/reference-cell.svelte b/apps/frontend/src/lib/components/blocks/grid-view/editable-cell/reference-cell.svelte
@@ -2,12 +2,17 @@
   import type { ReferenceField } from "@undb/table"
   import ForeignRecordsPickerDropdown from "../../reference/foreign-records-picker-dropdown.svelte"
   import { Button } from "$lib/components/ui/button"
-  import { writable, type Writable } from "svelte/store"
+  import { writable, type Readable, type Writable } from "svelte/store"
+  import { getRecordsStore } from "$lib/store/records.store"
+  import { getTable } from "$lib/store/table.store"
+
+  const table = getTable()
 
   export let tableId: string
   export let field: ReferenceField
   export let value: string[] = []
   export let displayValue: string[]
+  export let viewId: Readable<string | undefined>
   export let isEditing: boolean
   export let isSelected: boolean
   export let recordId: string
@@ -24,6 +29,12 @@
   $: if (hasValue && !hasValueReactive) {
     hasValue = hasValueReactive
   }
+
+  const recordStore = getRecordsStore()
+
+  function onSuccess(id: string) {
+    recordStore.invalidateRecord($table, id, $viewId)
+  }
 </script>
 
 <div class={$$restProps.class}>
@@ -36,13 +47,15 @@
             hasValue = hasValueReactive
           }
         }}
+        {onValueChange}
         {field}
         {tableId}
         {recordId}
         {r}
         bind:isSelected={hasValue}
         bind:selected
         let:builder
+        {onSuccess}
       >
         {#if hasValueReactive}
           <Button size="xs" variant="link" class="px-0" builders={[builder]}>
@@ -57,6 +70,7 @@
     {#if (isSelected || isEditing) && hasValueReactive}
       <ForeignRecordsPickerDropdown
         {onValueChange}
+        {onSuccess}
         shouldUpdate
         {field}
         {tableId}

diff --git a/apps/frontend/src/lib/components/blocks/grid-view/grid-view-cell.svelte b/apps/frontend/src/lib/components/blocks/grid-view/grid-view-cell.svelte
@@ -27,13 +27,15 @@
   import ButtonCell from "./editable-cell/button-cell.svelte"
   import DurationCell from "./editable-cell/duration-cell.svelte"
   import PercentageCell from "./editable-cell/percentage-cell.svelte"
+  import type { Readable } from "svelte/store"
 
   const table = getTable()
   const recordsStore = getRecordsStore()
 
   export let value: any
   export let displayValue: any
   export let index: number
+  export let viewId: Readable<string | undefined>
   export let field: Field
   export let recordId: string
   export let record: RecordDO | undefined
@@ -80,6 +82,7 @@
   {isSelected}
   {recordId}
   {record}
+  {viewId}
   readonly={field.isSystem || readonly}
   tableId={$table.id.value}
   class={cn(

diff --git a/apps/frontend/src/lib/components/blocks/grid-view/grid-view-data-table.svelte b/apps/frontend/src/lib/components/blocks/grid-view/grid-view-data-table.svelte
@@ -122,7 +122,7 @@
             const record = $store.records.get(item.row.original.id)
             const displayValue = record?.displayValues?.toJSON()?.[field.id.value]
             return createRender(GridViewCell, {
-              r,
+              viewId,
               index,
               value: item.value,
               field,

diff --git a/apps/frontend/src/lib/components/blocks/reference/foreign-records-picker-dropdown.svelte b/apps/frontend/src/lib/components/blocks/reference/foreign-records-picker-dropdown.svelte
@@ -20,6 +20,7 @@
   export let selected = writable<string[]>()
   export let onValueChange = (value: string[]) => {}
   export let onOpenChange: (open: boolean) => void = () => {}
+  export let onSuccess: (id?: string) => void = () => {}
 
   const foreignTableStore = new GetForeignTableStore()
 
@@ -57,6 +58,7 @@
         {foreignTable}
         bind:selected
         {onValueChange}
+        {onSuccess}
       />
     {/if}
   </Popover.Content>

diff --git a/apps/frontend/src/lib/components/blocks/reference/foreign-records-picker.svelte b/apps/frontend/src/lib/components/blocks/reference/foreign-records-picker.svelte
@@ -29,6 +29,8 @@
   export let recordId: string | undefined = undefined
   export let field: ReferenceField
   export let onValueChange = (value: string[]) => {}
+  export let onSuccess: (id?: string) => void
+
   let linkAfterCreate = true
 
   const perPage = writable(20)
@@ -92,6 +94,7 @@
     mutationFn: trpc.record.update.mutate,
     async onSuccess(data, variables, context) {
       await client.invalidateQueries({ queryKey: ["records", field.foreignTableId] })
+      onSuccess?.(recordId)
     },
     onError(error: Error) {
       toast.error(error.message)

diff --git a/apps/frontend/src/lib/store/records.store.ts b/apps/frontend/src/lib/store/records.store.ts
@@ -94,8 +94,13 @@ export const createRecordsStore = () => {
   const hasRecord = derived(store, ($store) => !!$store.records.size)
   const count = derived(store, ($store) => $store.ids.length)
 
-  const invalidateRecord = async (table: TableDo, recordId: string) => {
-    const result = await trpc.record.get.query({ tableId: table.id.value, id: recordId })
+  const invalidateRecord = async (table: TableDo, recordId: string, viewId?: string) => {
+    const view = viewId ? table.views.getViewById(viewId) : undefined
+    const result = await trpc.record.get.query({
+      tableId: table.id.value,
+      id: recordId,
+      viewId: view?.id.value,
+    })
     const record = (result as any)?.record
     if (!record) return
     const r = RecordDO.fromJSON(table, record)

diff --git a/packages/persistence/src/record/record.repository.ts b/packages/persistence/src/record/record.repository.ts
@@ -146,17 +146,19 @@ export class RecordRepository implements IRecordRepository {
   }
 
   async findOne(table: TableDo, spec: Option<RecordComositeSpecification>): Promise<Option<RecordDO>> {
-    const foreignTables = await this.getForeignTables(table, table.schema.fields)
-    const qb = this.helper.createQuery(table, foreignTables, table.schema.fields, spec)
+    const selected = table.getSelectFields()
+    const foreignTables = await this.getForeignTables(table, selected)
+    const qb = this.helper.createQuery(table, foreignTables, selected, spec)
 
     const record = await qb.limit(1).executeTakeFirst()
     const dto = record ? getRecordDTOFromEntity(table, record, foreignTables) : undefined
     return dto ? Some(RecordDO.fromJSON(table, dto)) : None
   }
 
   async find(table: TableDo, spec: Option<RecordComositeSpecification>): Promise<RecordDO[]> {
-    const foreignTables = await this.getForeignTables(table, table.schema.fields)
-    const qb = this.helper.createQuery(table, foreignTables, table.schema.fields, spec)
+    const selected = table.getSelectFields()
+    const foreignTables = await this.getForeignTables(table, selected)
+    const qb = this.helper.createQuery(table, foreignTables, selected, spec)
     const records = await qb.where(this.helper.handleWhere(table, spec)).execute()
 
     return records.map((record) => {
@@ -166,8 +168,9 @@ export class RecordRepository implements IRecordRepository {
   }
 
   async findOneById(table: TableDo, recordId: RecordId): Promise<Option<RecordDO>> {
-    const foreignTables = await this.getForeignTables(table, table.schema.fields)
-    const qb = this.helper.createQuery(table, foreignTables, table.schema.fields, None)
+    const selected = table.getSelectFields()
+    const foreignTables = await this.getForeignTables(table, selected)
+    const qb = this.helper.createQuery(table, foreignTables, selected, None)
 
     const records = await qb.where(`${table.id.value}.${ID_TYPE}`, "=", recordId.value).limit(1).execute()
 
@@ -180,9 +183,9 @@ export class RecordRepository implements IRecordRepository {
   }
 
   async findByIds(table: TableDo, ids: RecordId[]): Promise<RecordDO[]> {
-    const t = new UnderlyingTable(table)
-    const foreignTables = await this.getForeignTables(table, table.schema.fields)
-    const qb = this.helper.createQuery(table, foreignTables, table.schema.fields, None)
+    const selected = table.getSelectFields()
+    const foreignTables = await this.getForeignTables(table, selected)
+    const qb = this.helper.createQuery(table, foreignTables, selected, None)
 
     const records = await qb
       .where(