Theo's Typesafe CultTTC
Theo's Typesafe Cult3y ago
10 replies
Eylon

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 🥲
image.png
Was this page helpful?