Use with custom stores?
Hi
I was just wondering about the general idea / concept here: is this meant to be used in conjunction with stores / custom stores that hold the data of an application? Or is the idea to use things like 'createQuery' etc. and make use of the store that is created that way? So that would much more be implicit store creation. Which would mean that there is no need to create another store?
7 Replies
wise-white•3y ago
Hi @esc4rg0t , createQuery itself (and most other functions) returns a store, so I'd definitely recommend using it directly rather than passing the data into a separate store.
unwilling-turquoiseOP•3y ago
@Raytuzio thanks! I see,...so that removes a lot of "how do I design my stores",...but that would also mean that I would have to do 'createQuery' everywhere I need a specific entity. So for instance a todo, so I would repeat the fetching logic in code quite often. In that case I guess it would make sense to centrally define keys and functions for all different endpoints,....
wise-white•3y ago
If you've used react-query before, most of the patterns there are also applicable here. You don't have to directly write your fetching logic in the queryFn, you can import it from a separate location if you'd like. Similarly, you could also just wrap createQuery for each different endpoint (e.g. createGetPostsQuery), kind of like a React hook.
wise-white•3y ago
I'd also recommend checking out the examples on the repo: https://github.com/TanStack/query/tree/main/examples/svelte
GitHub
query/examples/svelte at main · TanStack/query
🤖 Powerful asynchronous state management, server-state utilities and data fetching for the web. TS/JS, React Query, Solid Query, Svelte Query and Vue Query. - query/examples/svelte at main · TanSta...
unwilling-turquoiseOP•3y ago
Yeah, I have not used it with React so far. But I guess my main concern was about stores, as I like the concept of svelte stores. Usually it feels like 'fetch once use everywhere'. I checked out the examples, but they are not talking about stores nor using stores. And all the logic is packed into the pages. I know, samples should be simple, so that makes sense. But doesn't answer all the follow up question on how to organize things 🙂
wise-white•3y ago
Ah I get your question now! Tanstack query's core is not svelte - it implements a framework-agnostic state management cache which can then be accessed in the framework-specific wrappers. You don't need to worry about sharing a store between components, you just call createQuery and if it's already in the cache then the cached result will be returned. If you want to understand how this works fundamentally, you can read this blog post: https://tkdodo.eu/blog/inside-react-query
Inside React Query
Taking a look under the hood of React Query
unwilling-turquoiseOP•3y ago
Oh, great! I will check that out then 🙂
Hm, ok. So summarized I think t hat TanStack in Svelte returns a store that already implements fetching logic (based on the supplied fetch function), a cache, handles refetching, mutation, and many more scenarios. So instead of implementing my own store that handles a lot of these things it's already there in a very generic fashion. Now it makes sense.