Use cache as store with some computed logic and graphQL structures
Hello all!
I'm trying to use react-query cache as the frontend store (to avoid using both zustand and react query)
I'm facing two issues:
1) How to make it work with graphQL-like stuff
I've read a lot but did not find the right way to make the cache work with trees. For instance if I query authors, i can do it throught authors or book.authors. Each "node" has a unique id but i cant manage to make all the different queries be aware of the other ones when they share ids.
2) How to add computed variables to the store?
So i have some computed variables that depend on queried values. For instnace les imagine i have the value "birthday" which each time that gets changed, updates the value "age" on the same node. I manage to merge zustand with this package https://github.com/mythographica/topologica and things work as they should, but trying to remove zustand and merge this package with reat query is being a challenge. Anyone having ideas about which way i could explore for this?
Thanks!
GitHub
GitHub - mythographica/topologica: simple topology maker for mnemonica
simple topology maker for mnemonica. Contribute to mythographica/topologica development by creating an account on GitHub.
3 Replies
ambitious-aqua•3y ago
I have actually spent this evening (nearly morning) pondering the same question. I want to have a global store that holds the logged-in user's data, like the access token, name, uesrname, email, etc. The access token will change periodically obv, meaning re-renders, as well as some of the user data if the user were to change it in their profile settings.
I thought that the RQ cache would be a clever way to side-step the re-render problem.
My findings are that React Context and useState/useReducer are the way to go (at least in my case). This is an article detailing what I've got set up https://codeburst.io/global-state-with-react-hooks-and-context-api-87019cc4f2cf
I'm not sure the functionality you're asking about would be achievable with RQ's cache, but would definitely be with React Context! You can make it as complex or keep it as simple as you like.
Medium
Global state using only React Hooks with the Context API (No Redux)
How to create a global app state without Redux using React’s latest built-in features: React Hooks and the Context API
ambitious-aqua•3y ago
It's also worth mentioning that RQ isn't necessarily designed to be a global state container or replace global state management libraries like Redux and such. It might not be the best idea to add more responsibilities to RQ beyond data fetching and caching.
fair-roseOP•3y ago
Hello @GolfinEagle . Thanks! i think i will be using Zustand in the end! Which will be similar to using useReducer