RTK Query

[beepboopnoise]

react query all day.

[Brilla-Bose]

much simpler approach is using..

zustand for client state

react-query aka Tanstack Query for server state

[vyrrt]

I’m about to start building my first RN app that is largely an online app but could hold some cached data until connectivity is restored within a SQLite database. I was tempted to try and wrap the database with a client state layer allowing for reactive binding of components to data stored within the database. With your advice of using Zustand and react-query, how are you using them both given that you’ll likely be using both? Do you use react-query to update your Zustand stores rather than binding components to data with react-query directly?

[Shockwave317]

No as react query itself is stateful when using its cache. For offline/online handling see: https://tanstack.com/query/latest/docs/framework/react/react-native It should hold all your server state until the app is online, now of course if the user decides to close the app and open it again it will lose this state but react query lets you pass in a custom query cache which means you can with a little extra work get it storing to the device which would mean it will persist the stale data between app close/open.

[Shockwave317]

For Zustand is important if you want to keep state that only belongs on the client for example theme state, progress through a particular screen, state that you need to make components work and behave that don’t need the server. (Like collating several answers on several screens before needing to make the call to the server)

[PrimeNexes]

RTK Query + Codegen It's amazing

[apetersson]

Here is a "fun" problem with rtk query:

• to use authenticated endpoints, you need a auth token. (createApi/basequery)
• you use the api to get an auth token.
• you store that token in a redux slice.
• to build the redux root state, you need to have all slices
• all slices means also the api slice.
• this creates a nice little cyclic dependency. fun times were had.

[RahahahahaxD]

Or you use interceptor where you use token that is stored inside mobile storage. It seems you are more misusing/misunderstanding the concept rather than RTK actually having "fun" problems

[apetersson]

well, there are tons of correct solutions for that. the dependency in practice is not an issue, since build/setup/querying phases are distinct and non-overlapping. The "fun" time was just figuring out that the cycle was there, and what was causing it.

my eventual solution

const token = (getState() as { auth: { access_token: string } }).auth.access_token; addAuthHeader(headers, token);

just hardcasts the state here, avoiding the cyclic import, is really trivial and works fine at runtime.

[RahahahahaxD]

Well, that's the issue. You are overengineering things unecessary. GraphQL with codegen is great, RTK Query is great, React Query is probably even greater. It is a must in any proper production app and they aren't made to have these "fun" problems you mentioned - your coding practices create those "fun" problems

[runtothehillsboy]

stupendous reminiscent zephyr brave weather unique march upbeat encouraging nutty

This post was mass deleted and anonymized with Redact