TanStackT
TanStack•3y ago•
11 replies
cold-orange

Svelte with tanstack query

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:
$: streamsQuery = getStreamsQuery($dataRefetchInterval);
 $: ({ 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?
Was this page helpful?