Accessing data type-safe in script tag

[juztim]

Hi, thanks for the awesome library. I just started using it, everything is going well. However I faced one issue, the correct type for a query or mutation is only available if you access the data in an
{#if $data.isSuccess} block, how exactly would I be able to access the store from a function in my script section to e.g make a filter function that returns the data with a filter applied.

[ottomated]

You would use something like a derived store.

const data = trpc.example.query();

const filtered = derived(data, (d) => {
  if (!d.isSuccess) return;
  return d.filter(/* something */);
});

[juztim]

Ah! Thank you a lot. Im new to Svelte(kit) coming from Next.JS (T3).
Thanks again for the amazing work!

[ottomated]

Just use {#if $filtered}. Remember that data is a store so you need to prefix it with a $.

[juztim]

Hi again, do you have any idea how this would be possible with a reactive query?

e.g.

$: query = trpc.admin.user.getUsers.query({ page, });

Returns

expects stores as input, got a falsy value

[ottomated]

const query = trpc.admin.user.getusers.query(
  derived(page, (page) => ({ page }))
)

[ottomated]

https://tanstack.com/query/latest/docs/framework/svelte/reactivity