An idiomatic way of using Svelte 5 and @tanstack/query!

[frederikhors]

Using Svelte with @tanstack/query is something magnificent and first of all I would like to warmly thank all the contributors, big and small.

Svelte 4

With Svelte 4 I always used this code:

<script>
    import { createQuery } from '@tanstack/svelte-query';

    export let pagination = { size: 5 };
    export let condition = undefined;

    let order = "age";
    let search = "";

    $: listInput = {
        pagination,
        condition,
        orderBy: [order]
    };

    $: playersStore = createQuery({
        queryKey: ['players', listInput, search],
        queryFn: () => someFetch(listInput, search)
    });

    $: ({ error, isLoading, isRefetching, data } = $playersStore);
</script>

even though I know that $: playersStore is recreated from scratch every time a dependency changes.

It is simply so comfortable (and Svelte so fast and optimized) that the weight of recreating and some other problems do not bother and everything works well.

I know that docs page suggests to use derived store, but it's too complicated to use it when there are so many dependencies for a query.

This is a simple example of my Svelte 4 code.

Svelte 5

Now for Svelte 5 I'm looking for a convenient way and it would be nice to combine all the ideas to have a common and idiomatic way and maybe - why not - even a nice article on the @TkDodo blog one day!

Since we can already use code with Svelte 5 syntax in our projects even if the components are still in Svelte 4 (great idea from the Svelte team!) I tried to use @tanstack/query in various ways, like many people.

So far the best solution is @nicksulkers's one:

utils.svelte.ts:

export const reactiveQueryArgs = <T>(cb: () => T) => {
  const store = writable<T>();

  $effect.pre(() => {
    store.set(cb());
  });

  return store;
};

+page.svelte:

let {search}: {search: string} = $props();

const query = createQuery(reactiveQueryArgs(() => ({
    queryKey: ["users", `search:${search}`],
    queryFn: () => fetch(`/users?search=${encodeURIComponent(search)}`)
})));

It works amazingly well! Here is a reproduction of it in my demo project.

But is this really an idiomatic way of using it?

For example, @Thiagolino8 proposed a similar way using:

import { readable } from "svelte/store";

export function stateToReadable(cb) {
  return readable(cb(), (set) => {
    const dispose = $effect.root(() => {
      $effect.pre(() => {
        set(cb());
      });
    });
    return () => dispose();
  });
}

What changes from the reactiveQueryArgs function? Why $effect.root and readable store?

It is also necessary to mention the excellent work of @zhihengGet who also proposed various forms of reactivity.

Will we be able to find a great way to this wonderful marriage?