TanStackT
TanStack•3y ago•
2 replies
progressive-amaranth

How can I create a component for wrapping the loading states?

* A "typed" component that is 🙂

I'm using @tanstack/svelte-query@5.0.0-rc12

I have a bunch of admin panels, that are each backed by individual queries. Ideally I want to have the loading/failure states all have the same code - without boilerplate.

I'd love to be able to pass the data as a property to the slot. These are my current results - which is probably serviceable, ill, just have expose the query itself rather than the data.

Any ideas? I'm reasonable at generics and svelte, but not sure if I'm being stupid, or svelte has a limitation here (my fetchFns have typed return values from zod).

GenericsExample.svelte
<script lang="ts" generics="T extends CreateQueryResult">
    import type { CreateQueryResult } from "@tanstack/svelte-query";
    export let query: T;
</script>

<slot slotQuery={$query} data={$query.data}/>


+page.svelte
<script lang="ts">
    import { getUserById } from '$lib/users/data';
    import { createQuery } from '@tanstack/svelte-query';
    const userQuery = createQuery(getUserById('someid'));
</script>

<pre>
{$userQuery.data} // this is correctly typed
<GenericsExample query={userQuery} let:slotQuery let:data>
    {slotQuery}  // this is correctly typed
    {slotQuery.data}  // this is correctly typed
    {data}  // this is unknown
</GenericsExample>
</pre>


Also, assigning data using $: data = $query.data also results in undefined. Runtime seems to be ok tho.
Was this page helpful?