#Using react query cache enough for my use case, or do I need to include a state management lib?

2 messages · Page 1 of 1 (latest)

fresh herald
#

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 ChatQuestion completed successfully (also using that data). User input required, calling an API using useMutation
  • FollowUp2: ONLY shown once the API call within FollowUp1 completed successfully (also using that data). User input required, calling an API using useMutation
  • ChatResult: ONLY shown once the API call within FollowUp2 completed 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.

jolly eagle
#

You could define your mutations inside ChatManager and render FollowUp1, FollowUp2 and ChatResult depending on the state of the mutations