Global state management in T3.
Hi, this is probably a nooby question but would recommend me to use zustand in this case?:
I have a cart which lives on the Navbar.
Item Page has a „add to cart” button. I want to open the cart after clicking this button. This is a cart that lives in the database so I could maybe try open it onSuccess as it will be refetched after clicking the button, but it would also mean the cart would be open on initial render of the site :/
Cheers
6 Replies
If it's from the db why not just use trpc/react-query
You mean this for example?
1. do mutation to database and set the is_card_open to true
2. on mutation success invalidate the query that checks if the card is open, lets call this query useIsCardOpenByIdQuery(id)
3. Use data from this useIsCardOpenByIdQuery(id) everywhere, treat it as global state (because it is). If you have any more questions feel free to ask.
You could also potentially do optimistic update to make it smoother, but not required
Wouldn't this approach affect the performance?
Could you elaborate further why would this affect the performance? You could technically optimize it further but this is enough for 99% use cases, https://wiki.c2.com/?PrematureOptimization
I’m a pretty new user to Create-T3-App (using it to prototype a new refactored frontend for my web app, and if all goes well it will become the actual frontend replacing the old one entirely), but I’ve been using React-Query for server state (API responses) and Jotai for in-app state (search filters and the like) and it’s been going well so far 🤞🏻… both seem to be working out of the box in both cases.
What you want to do with this cart seems like a pretty good use case for React-Query with an optimistic update.