#Exposing mutation state through zustand

4 messages · Page 1 of 1 (latest)

forest remnant
#

We have a complex scenario where a mutation is triggered from one part of the application, but its loading state is displayed in a different part.
I'm not familiar with a mechanism that allows sharing the inner state of a useMutation call (isLoading, isSuccess etc) like we can with useQuery, so I want to sync it to a zustand store:

const useStore = create(set => ({
  state: 'inactive',
  setState(state) {
    set(() => ({ state }));
  }
}));

function Component() {
  const setState = useStore(store => store.setState)
  mutation = useMutation({
    mutationFn() {
      setState('loading');
      ...
    },
    onSuccess() {
      setState('active');
      ...
    }
  })
}

I was wondering if there is a better way to achieve this?

I also considered using useEffect but the direct approach I showed in the snippet seemed better in my eyes.

fathom pebble
#

useMutationState is your friend

forest remnant
#

Thanks!
Can I reset a mutation from useMutationState?
The object I get does not seem to have all the options as the useMutation return value

fathom pebble
#

You can only reset a mutation if you have access to the useMutation