Svelte 5 and TanStack Query, how to react to fetched data change

[stefa168]

Hi, I have been trying (unsuccessfully) to use TanStack Query to fetch some data that has to be rendered in a TanStack table.

I am following the example found in the alpha-10 version available, with the minimum needed changes to (ideally) work:

let options: TableOptions<MyType> = {
  data: $query.data ?? [],
  columns: defaultColumns,
  getCoreRowModel: getCoreRowModel()
};

const table = createTable(options);

I have already checked that the query actually receives the data (it does), so then I'm wondering what should be changed to get the table to react to data changes.

I've tried using also a $derived rune for the data, however this doesn't change anything.

From what I've seen, in the past the options object was manually updated, however I'd like to know if there is a better way than that, considering that the examples don't have it anymore (commit 12d4157).

Does anybody have any suggestion?

[KevinVandy]

I think you have to use the get keyword in svelte?

[stefa168]

I've tried it right now, however it doesn't change anything unfortunately...

Also, the documentation of get says

This works by creating a subscription, reading the value, then unsubscribing.

This is probably the reason why get isn't good for this issue...

[stefa168]

I've just gotten back to the PC; I tried starting from the beginning, and I used the basic example from commit 12d4157.

I adapted it just enough to actually be using Svelte 5 runes, and I checked if the options are actually updated (and they are).
Not sure what is the cause of the issue.

<script lang="ts">
	import type { ColumnDef, TableOptions } from '@tanstack/svelte-table';
	import {
		createTable,
		FlexRender,
		getCoreRowModel
	} from '@tanstack/svelte-table';

	type Person = {
		firstName: string
		lastName: string
	}

	let defaultData: Person[] = $state([]);

	const defaultColumns: ColumnDef<Person>[] = [
		{ accessorKey: 'firstName' },
		{ accessorKey: 'lastName' }
	];

	let options: TableOptions<Person> = {
		data: defaultData,
		columns: defaultColumns,
		getCoreRowModel: getCoreRowModel()
	};

	const table = createTable(options);

	const onclick = () => {
		defaultData.push({
			firstName: 'a',
			lastName: 'b'
		});
	};

	// This shows that the 'options' variable has its data updated.
	$inspect(options)
</script>

<div class="p-2">
	<span>Number of elements: {defaultData.length}</span>
	<button {onclick}>Add</button>
	<table>
		<thead>
		{#each table.getHeaderGroups() as headerGroup}
			<tr>
				{#each headerGroup.headers as header}
					<th>
						{#if !header.isPlaceholder}
							<FlexRender
								content={header.column.columnDef.header}
								context={header.getContext()}
							/>
						{/if}
					</th>
				{/each}
			</tr>
		{/each}
		</thead>
		<tbody>
		{#each table.getRowModel().rows as row}
			<tr>
				{#each row.getVisibleCells() as cell}
					<td>
						<FlexRender
							content={cell.column.columnDef.cell}
							context={cell.getContext()}
						/>
					</td>
				{/each}
			</tr>
		{/each}
		</tbody>
	</table>
</div>

[KevinVandy]

https://github.com/TanStack/table/blob/alpha/examples/svelte/column-ordering/src/App.svelte

advice from @walker-tx

[stefa168]

Ah, this makes sense! (More or less, never worked with signals before 😅)

I will try it in an hour or so, thanks @KevinVandy @walker-tx !!

By the way, isn't it possible to integrate the signals inside the library? This way boilerplate could be reduced

[walker-tx]

I understand your frustration with boilerplate code as a fellow Svelte dev. The current signal (runes) pattern typically requires a getter, and trying to bypass it can add unnecessary complexity for minimal code savings. I prefer to let users handle state abstraction themselves and have created a state factory function for managing column state reactively in another example, which you might find useful. There are various ways to approach this, so choose what best fits your needs.

My 2 cents though: it's best not to try making Svelte 5 look like Svelte 4, as they are intentionally designed to be different. The little bit of boilerplate offers you so much more for only 6 additional characters.

[stefa168]

Don't worry, I'm not frustrated at all! 😃

I completely agree about having total control (I love it when possible); I think that making the factory available as a "shortcut" is a very good alternative whenever you just need to have everything working without customization.
Also, this would help new developers that would expect the runes to "just work" or people that are migrating to Svelte 5 from 4

Anyway, thanks for the great input!

[walker-tx]

Yeah I feel that. I put a lot of effort into this adapter's documentation, type hints, and type strings though. Obviously those docs are less accessible while we wait on Table v9 to release, but they'll be there and they'll be helpful.

Cheers.