Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Store-based reactivity and Lazy queries #44

Closed
2 tasks done
vishalbalaji opened this issue Jul 12, 2024 · 2 comments
Closed
2 tasks done

Store-based reactivity and Lazy queries #44

vishalbalaji opened this issue Jul 12, 2024 · 2 comments

Comments

@vishalbalaji
Copy link
Owner

vishalbalaji commented Jul 12, 2024

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:

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
Copy link

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
Copy link
Owner Author

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants