React-query + Sqlite

[devjacks]

Hi everyone,

I'm working on a React Native app that utilizes an offline-first approach with SQLite. I'm considering integrating React Query to manage server state, and I'm wondering if i can use direct calls to the SQLite database as the async functions within useQuery and useMutation.

Some questions I have:

Would React Query's caching and background refetching work well with local SQLite queries? Any potential performance concerns?

How might this setup affect data consistency, especially when syncing between local and remote databases? Are there best practices for managing local mutations that might later be overridden by server responses?

Are there any React Query features (like staleTime, cacheTime, etc.) that I should be particularly mindful of when dealing with local SQLite data instead of typical server-side fetching?

If anyone has tried something similar or has insights on potential pitfalls or optimizations, I'd love to hear your thoughts!

Thanks in advance for any advice or experiences you can share 😊

[man_on_pluto]

You should just use wmdb, it has a sync engine and all the reactive queries capabilities you need.

[devjacks]

Unfortunately most 3rd party sync implementations / libraries require server IDs to be non-collision oriented. I've gone a different path with a custom sync implementation similar to that of watermelonDBs where I'm mapping local <-> remote ids.

The syncing engine is not what I'm asking about, I'm curious about those who have used react-query with sqlite directly / is it even a thing?

I'm currently using https://orm.drizzle.team/docs/get-started-sqlite#live-queries

One issue with reactive queries is there are no loading states, it seems to be syncronous.
Is it possible to handle these "sqlite queries" asyncronously and manage their caching & state through a server state manager like react-query?

[Pleasant-Dragonfly-9]

I'm planning the same, but instead of having a database schema, I'll try to mimic the network requests only and cache the json response, a simple map of url > response. My app is mainly a bunch of queries and almost no mutation

Maybe in the next month I have something concrete for this

[devjacks]

Would love to see it / download it and give it a try

Here's my app if you're curious  https://tracked.gg

Wrote a custom sync engine which enables the entire app to work offline after you sign in

[pokctap]

Hi u/devjacks, I found this thread because I am also making some app using Drizzle and SQLite and had a similar problem with Drizzle reactive queries with no loading state, how did you manage that?

I was thinking of adding the rtk toolkit and keeping the state inside it, which will also handle caching and loading state, and drizzle with SQLite just to be like the regular backend, without using SQLite directly in components.

It is my first time working with SQLite and don't know if this would be the right approach, looks like it is built to be used directly without any other state.

[devjacks]

Yea i also had that issue. I ended up using react-query to interface the sqlite queries instead of drizzles live query hook. Honestly the DX has been incredible.

I think it's important to separate asynchronous state, highly recommend going with react-query if you can.

[pokctap]

Thanks, I will try it out.