How to reuse a tanstack query store in svelte ?

[MarArMar]

I see we can use tanstack query in a component,

And pass the store as a prop to sub components,

Is there a way to create somewhere & then "import" the store instead ?

This same code from a Svelte component, if I place it in a .ts file, I makes me an error

const myData = createQuery({
  queryKey: ['optimistic'],
  queryFn: fetchDataQuery,
})

Error: Function called outside component initialization
    at get_current_component (chunk-6ZKBJOKC.js?v=b4567312:1199:33)
    at getContext (chunk-6ZKBJOKC.js?v=b4567312:1238:10)
    at getQueryClientContext (chunk-NDIYTIS4.js?v=b4567312:37:18)
    at useQueryClient (chunk-NDIYTIS4.js?v=b4567312:68:10)
    at createBaseQuery (chunk-NDIYTIS4.js?v=b4567312:80:18)
    at createQuery (chunk-NDIYTIS4.js?v=b4567312:106:10)

[MarArMar]

No one ?

[woojunro]

I'd been facing the same issue, but now I'm reusing a query like:

$lib/stores/queries

export const useSomethingQuery = () =>
	createQuery({
		queryKey: ['something'],
		queryFn: getSomething,
	});

+page.svelte

<script lang="ts">
	import { useSomethingQuery } from '$lib/stores/queries';

	const something = useSomethingQuery();

	// ...
</script>

[MarArMar]

I ended up doing almost that, something like:

let query = null

export const getQuery = () =>
if query :
return query

query = createQuery({
	queryKey: ['something'],
	queryFn: getSomething,
});
return query

It s slightly more reused

[woojunro]

I think your approach is better because when multiple components need the same query, the queryFn is called only once. However, if I need a query with several parameters, it is quite cumbersome to manage all the parameters that have been queried. I don't know why svelte query does not provide something like useQuery while it utilizes svelte store...