-
Notifications
You must be signed in to change notification settings - Fork 6
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Why not use @tanstack/query
for the react hooks?
#46
Comments
I had thought about it but never took the time to look into it. The one thing I was worried about was that it looks like Looks like you solved that problem in Some ways you could improve your current implementation:
Something that might make all this easier for you is that I've been looking into automatically caching prepared statements in the DB class itself so users don't have to worry about it. This is a common thing done in many language bindings for SQLite.
WASM size and JS size are not exactly equivalent. WASM, since it is already byte code and supports streaming compilation, can actually start executing as soon as the final byte finishes downloading. JS, on the other hand, takes quite a while for low-end devices to parse, compile and start. E.g., 1MB of JS can take 2 seconds to compile and start after it is downloaded. 1MB of WASM starts as soon as download completes. Old but useful article: https://medium.com/reloading/javascript-start-up-performance-69200f43b201 I wonder if |
Thanks for your response
good catch, will fix this
the
Yoooo that's dope! I'm still on v0.15 for now, wasn't sure whether 0.16 was stable.
I'm not sure I'm testing this right, but I just tried running a Vite build on my repo (the only thing I do with react-query is what is pasted above) with the |
The SQLite team is considering pushing the statement cache down into SQLite itself -- https://sqlite.org/forum/forumpost/d5939a8557a7a85f I really hope they do this.
it is as of 0.16.2-next. I need to update some docs before making it the official release. Notable changes are:
|
Hey I was trying to make a more production-ready version of this "react-query adapter" above, and I had a question : is there a cost to keep listening for changes ( |
Minimal overhead. Just the extra memory as you mention. If all listeners were removed entirely there's potentially a speedup since we can reduce the number of times we have to cross the WASM <-> JS bridge which can be expensive. To that end, it'd be an improvement if we gathered updates in WASM and only called into JS once on commit of the transaction. Related: #48 |
@Sheraff I was setting up dependencies for a project and also ended up with using I didn't yet understand why the hook needs to be so complex? I'm quite sure I'm missing something. For example the comment lists how to know which queries are active and how to invalidate those, but why is this required? /**
* Rely on react-query's cacheManager to
* - know which queries are active
* - force invalidation of "currently in-use" queries
*
* Rely on vlcn RX to
* - know which tables are used by a query
* - know when to invalidate queries
*/ My first (probably naive) thought was to simply do: import { useQuery } from '@tanstack/react-query'
import { useDB } from '@vlcn.io/react'
import sql from 'sql-template-tag'
export function Component() {
const ctx = useDB('dbName')
const threshold = 10
const sqlQuery = sql`SELECT * FROM my_table WHERE some_value > ${threshold}`
const {
data: rows,
isLoading,
isError,
} = useQuery({
queryKey: ['sqlQuery', sqlQuery.sql, sqlQuery.values],
queryFn: async () => {
// Not sure how to represent ctx as a dependency for the query
const rows = await ctx.db.execO<{ id: string; name: string }>(
sqlQuery.sql,
sqlQuery.values
)
return rows
},
})
if (isLoading) return <div>Loading...</div>
if (isError) return <div>Error</div>
if (!rows) throw new Error('No data') // should not happen
return (
<ul>
{rows.map((row) => (
<li key={row.id}>{row.name}</li>
))}
</ul>
)
} |
@kimmobrunfeldt 99% of the complexity is for reactive queries. What I wanted to make (and what What you wrote here is completely fine, but there is no reactivity, and if you want the query to re-execute and re-render, you'll have to explicitly call Also, even though it's not really the subject, to answer your remark "Not sure how to represent ctx as a dependency for the query": you can add |
@Sheraff thanks for the quick reply. Got it, now everything makes sense 👍
👏 thank you! |
By |
I meant |
Ok right, the |
I'm working on making a "starter template" for offline-first PWAs and I was wondering if there was a reason to have gone full-custom for the query hooks? The
@tanstack/query
library is pretty mature and nice to use.If I were to give the sales pitch, here's what I could say
On the other hand
I tried a quick implementation of
useQuery
, here's what that could look like:If you're curious, here's the "starter template" I'm talking about https://github.com/Sheraff/root
The text was updated successfully, but these errors were encountered: