Store-based reactivity and Lazy queries

[vishalbalaji]

Hey all! Just wanted to create this issue to address and document some potential breaking changes to this library in upcoming versions. Basically, with latest version of @tanstack/svelte-query, the way to do reactivity shifted from using reactive statements ($ labels) to stores. Since I found a bit of time to work on this library, I thought that I would update it to be compatible with that standard. After some experimentation, I feel that the following changes need to be made:

• Add support for passing in svelte stores for opts and input. #47
• Add a lazy option to make createQuery, createInfiniteQuery and createQueries. #49

This option would disable the query by default and return a function to resolve/enable them. This resolve function will also optionally take in Promise<TData> which will populate the query cache before enabling, effectively simplifying the process of streaming the query data from the server(#22). Basically, this would look something like this:

<script lang="ts">
import { trpc } from '$lib/trpc/client';
import type { PageData } from './$types';

export let data: PageData;

const api = trpc();
const query = api.greeting.createQuery('normal');
const [lazyQuery, resolveLazyQuery] = api.greeting.createQuery('lazy', { lazy: true });
const [streamedQuery, resolveStreamedQuery] = api.greeting.createQuery('streamed', { lazy: true });
</script>

<!-- Regular query -->
<div>
  {#if $query.isLoading}
    Loading...
  {:else if $query.isError}
    Error: ${query.error}
    {:else}
    {$query.data}
  {/if}
</div>

<!-- Query only enabled on button press -->
<div>
  {#if $lazyQuery.isLoading}
    Loading...
  {:else if $lazyQuery.isError}
    Error: ${lazyQuery.error}
  {:else}
    {$lazyQuery.data}
  {/if}
  <button on:click={() => resolveLazyQuery()}>Enable lazy query</button>
</div>

<!-- Query with data streamed from +page.server.ts -->
{#await resolveStreamedQuery(data.streamedData)}
  Awaiting...
{:then}
  {#if $streamedQuery.isLoading}
    Loading...
  {:else if $streamedQuery.isError}
    Error: ${streamedQuery.error}
  {:else}
    {$streamedQuery.data}
  {/if}
{/await}

I plan on implementing these incrementally over the course of the next few weeks. One thing to address here would be the release of Svelte 5 and reactivity using runes, which is likely be adopted by Tanstack Query sooner or later. However, as of today, discussion of this is mainly just one issue and one draft PR which isn't likely to be merged in the near future. Once this gets merged into a stable version, I will implement those changes here accordingly.

[raymonddaikon]

Just an update but the draft svelte 5 PR was merged into the svelte-5-adapter branch and can be tested by installing pnpm add https://pkg.pr.new/@tanstack/svelte-query@4e3325e.

[vishalbalaji]

Hey @raymonddaikon, thanks for letting me know! I'll keep an eye on it and maybe maintain support for that on a separate branch when I am done with this issue. I'll make sure to update the README when that happens.