Help: Table is not updating after adding new record

[jonathanmusto]

I'm really new to svelte and sveltekit, so please stick with me. I've built a gRPC backend in Go using connectrpc & bufbiuld. That all working perfectly.

In my +page.server.ts i'm pulling from my gRPC find function in the load function as follows.

...
export const load: PageServerLoad = async () => {
    try {
        const response = await client.find({},{headers: headers});
        return {
            response: toPlainMessage(response),
        };
    } catch (e) {
        throw error(500, 'Server error');
    }
};
...

In my +page.svelte i'm then using this response data to build my svelte-headless-table as follows:

<script>
  ...
  export let data: PageData;

  const table = createTable(readable(data.response.productTypes));

  const columns = table.createColumns([
    table.column({
      accessor: ( item ) => item.data?.name,
      header: "Name",
    }),
    table.column({
      accessor: "id",
      header: "Created At",
      cell: ({ value }) => {
        const dateFromObjectId = new Date(parseInt(value.substring(0, 8), 16) * 1000);
        return dateFromObjectId.toUTCString();
      },
    }),
  ]);

  const { headerRows, pageRows, tableAttrs, tableBodyAttrs } = table.createViewModel(columns);
  ...
</script>

<table {...$tableAttrs}>
  <thead>
    {#each $headerRows as headerRow (headerRow.id)}
      <Subscribe rowAttrs={headerRow.attrs()} let:rowAttrs>
        <tr {...rowAttrs}>
          {#each headerRow.cells as cell (cell.id)}
            <Subscribe attrs={cell.attrs()} let:attrs>
              <th {...attrs}>
                <Render of={cell.render()} />
              </th>
            </Subscribe>
          {/each}
        </tr>
      </Subscribe>
    {/each}
  </thead>
  <tbody {...$tableBodyAttrs}>
    {#each $pageRows as row (row.id)}
      <Subscribe rowAttrs={row.attrs()} let:rowAttrs>
        <tr {...rowAttrs}>
          {#each row.cells as cell (cell.id)}
            <Subscribe attrs={cell.attrs()} let:attrs>
              <td {...attrs}>
                <Render of={cell.render()} />
              </td>
            </Subscribe>
          {/each}
        </tr>
      </Subscribe>
    {/each}
  </tbody>
</table>

When I load the page it works fine an i see all the records along with their names & timestamps in the table. Great!

Next, i'm using sveltkit-superforms to add records at the backend using my gRPC create function. With sveltekit-superforms im using progressive enhancement, which by default will invalidateAll after successful submission. This invalidateall causes my load function to run again, which i do want, as I want to see the new record I just add. Again, this works, I can see via the console logs that the load function is getting re-run and the new record I just added is in the result. Great!

But.... why is my svelte-headless-table not showing the new record? I've to to refresh the page in order for it to show up.

Conversely, if I add a simple each block:

{#each data.response.productTypes as pt}
<p>{pt.data?.name}</p>
{/each}

I see the new record instantly inside the each block.

So, why is my svelte-headless-table not reacting to the new record in the productTypes array, but the each block is?

I've probably missed some really simple concept here and hopefully it's a simple fix.

Thanks for reading!

[jonathanmusto]

Apologies, answered in #105.