Svelte with tanstack query

[raven thistle]

I have folder queries/streamQuery.ts in my app. Its content of this file:

export function getStreamsQuery(refetchIntervalS: number = 10) {
  return createQuery({
    queryKey: ['streams'],
    queryFn: async () => {
      console.log('fetching streams');
      const res = await fetch(`${PUBLIC_API_KEY}/streams`);
      const data = await res.json();
      return data.map(streamMapper);
    },
    refetchInterval: refetchIntervalS * 1000
  });
}

then somewhere in my .svelte files, where I need streams, Im using this like that:

$: ({ data, status, isLoading } = $streamsQuery);```

$dataRefetchInterval is some global store acted like app settings. I would like make my .svelte component not aware, that this stream needs some configuration. From  the point of view of .svelte component there is no need to know how to configure this stream. Is there any way to handle this ? As far as I know, I cant use reactive store inside regular .ts function?

[tidal lodge]

v5 beta allows you use stores for your options - you can see the docs here: https://tanstack.com/query/v5/docs/svelte/reactivity

Since you're passing in a store to getStreamsQuery, you could then use a derived store like how I wrote the example on that page

[raven thistle]

Thanks! looks nice. I'll test it out. I wonder also if something like this is doable with this approach:
I my function getStreamQuery i would like to set reactive global store to listen whether there is isLoading state true. So basically I would like to have one global flag, which is true, whether any isLoading state is true, from any query within the app.

[tidal lodge]

Hmm interesting! Please message in here if you figure out a way to do that 🙂

[raven thistle]

sure!

[tidal lodge]

Oh the other thing with this solution - you need getStreamsQuery to accept Readable<number>, so you pass the store directly into the function like getStreamsQuery(dataRefetchInterval)

[raven thistle]

@tidal lodge looks like this works fine:

export function getStreamsQuery() {
  const query = createQuery(
    derived(dataRefetchInterval, ($dataRefetchInterval) => ({
      queryKey: ['streams'],
      refetchInterval: $dataRefetchInterval * 1000,
      queryFn: async () => {
        const res = await fetch(`${PUBLIC_API_KEY}/streams`);
        const data = await res.json();
        return data.map(streamMapper);
      }
    }))
  );

  return derived(query, ($query) => {
    isAnyStreamLoading.update(() => $query.isLoading || $query.isFetching);

    return $query;
  });
}

I still don't get it well when should isLoading be triggered and when isFetching 😄 but most important updating global state from this function is achievable quite easy.

then in svelte component just:

 $: streamsQuery = getStreamsQuery();
 $: ({ data, status, isFetching } = $streamsQuery);

hope I didn't miss anything and there is no memory leak or some unwanted side effects

isAnyStreamLoading its just boolean writable store