integrating a global state manager
I'm not sure if I even need a global state manager, I may be not understanding trpc\tanstack query fully.
I feel like a certain design requirement forces me to use a global state manager.
Adding a pic of the data flow in my app.
So basically, TaskBoard holds the columns and tasks data that I get form the server using api...useQuery.
The problem I am facing is that my Navbar renders a button which opens the modal.
Since <App/> is the parent, I thought it was a good idea to call createTask...useMutation there and so I could call createTask with a callback provided to the modal.
Now the issue is that I wanted to use <TaskBoard/>'s refetch method from the api..useQuery to update tasks (And also my local state there) but obviously I can't since its in <App/>'s child.
I think a global state manager would rid me of this issue at all, and I've taken a look at Zustand and wanted to try it but I am not sure how it would be integrated with the api calls? Can't seem to find any example online of a t3-stack app with global state included.
Also I am wondering if this problem I am having can be solved without using a global state manager and without altering my current state formation too much.
I know this is long sorry 🥲
6 Replies
Don’t think you need some crazy state solution for this. Just lift the state up to the common parent of all the things that will use it, and pass it through prop drilling or context. Alternatively, Jotai would probably solve your problem in < 10 LOC. just create an atom somewhere and consume it everywhere where you want that state.
But isn't using Jotai\Zustand like eliminating the purpose of the useQuery?
No they should be doing very different things
RQ is for data fetching/ server state sync management
Jotai zustand is client state
Correct me if I’m wrong but here’s my understanding. You have a creation form component and a separate modal component that should trigger the submitting of the form. The form on submit needs to handle a mutation with the form data then invalidate any related queries so they refetch.
You can call refetch other ways
I have been messing with Jotai and it was very nice and easy to implement, it works great for me and I'd rather use that instead of prop drilling like I have been until now. 🙂
Thank you very much!
Of course! Feel free to ping me if anything else comes up