Hey all! Let me first simplify my use-case using some pseudo code:
const ChatManager = () => {
return (
<>
<ChatQuestion/>
<FollowUp1/>
<FollowUp2/>
<ChatResult/>
</>
);
};
I am building a simple 'chat' app, actually the user is asked to enter a question initially but that's about it. In the snippet above you can see following components:
- ChatQuestion: The only component to initially show to the user, asking for input, calling an API using
useMutation - FollowUp1: ONLY shown once the API call within
ChatQuestioncompleted successfully (also using that data). User input required, calling an API usinguseMutation - FollowUp2: ONLY shown once the API call within
FollowUp1completed successfully (also using that data). User input required, calling an API usinguseMutation - ChatResult: ONLY shown once the API call within
FollowUp2completed successfully, showing a result to the user.
I know react query is basically a async state manager using a map behind the scenes (I just bought the query.gg course 😆). Now I wonder could I implement the logic mentioned above only using react-query, without depending on another state management library like Zustand.
I know in an earlier version stuff like this was possible: https://tkdodo.eu/blog/breaking-react-querys-api-on-purpose#state-syncing. To me stuff as mentioned in: https://iamashot.medium.com/supercharge-your-react-state-management-like-a-senior-dev-unlocking-the-power-of-zustand-and-react-b2db33ecd12 seems to be not optimal.