TanStack•7mo ago•

3 replies

ill-bronze

"Nesting" mutations?

I've got a core

useUpdate

useUpdate

which does a mutation and invalidates some queries in the

onSuccess

onSuccess

.

I've got another

useArchive

useArchive

which is really just an update, and should do the same invalidations as

useUpdate

useUpdate

, but then also a few more things (like some other invalidations) in its own

onSuccess

onSuccess

.

But then I've got a third

Sidebar

Sidebar

component, which uses

useArchive

useArchive

in an event handler, and then has its own

onSuccess

onSuccess

logic (e.g., close the sidebar).

Is there anything particularly wrong with defining a "nested" mutation? Something like:

function useUpdate() {
  return useMutation({
    mutationFn: (foo) => { /* update mutation */ },
    onSuccess() { /* post-update stuff */ }
  });
}

function useArchive() {
  const {mutateAsync: update} = useUpdate();
  return useMutation({
    mutationFn: (foo) => update(foo),
    onSuccess() { /* post-archive stuff */ }
  });
}

function Sidebar() {
    const {mutate: archive} = useArchive();
    const foo = {foo: 'bar'};

    const onArchive = () => archive(foo, {
      onSuccess() { /* post-event stuff */ }
    });

    // ...
}

function useUpdate() {
  return useMutation({
    mutationFn: (foo) => { /* update mutation */ },
    onSuccess() { /* post-update stuff */ }
  });
}

function useArchive() {
  const {mutateAsync: update} = useUpdate();
  return useMutation({
    mutationFn: (foo) => update(foo),
    onSuccess() { /* post-archive stuff */ }
  });
}

function Sidebar() {
    const {mutate: archive} = useArchive();
    const foo = {foo: 'bar'};

    const onArchive = () => archive(foo, {
      onSuccess() { /* post-event stuff */ }
    });

    // ...
}

TanStack•7mo ago•

3 replies

ill-bronze

"Nesting" mutations?

I've got a core

useUpdate

useUpdate

which does a mutation and invalidates some queries in the

onSuccess

onSuccess

.

I've got another

useArchive

useArchive

which is really just an update, and should do the same invalidations as

useUpdate

useUpdate

, but then also a few more things (like some other invalidations) in its own

onSuccess

onSuccess

.

But then I've got a third

Sidebar

Sidebar

component, which uses

useArchive

useArchive

in an event handler, and then has its own

onSuccess

onSuccess

logic (e.g., close the sidebar).

Is there anything particularly wrong with defining a "nested" mutation? Something like:

function useUpdate() {
  return useMutation({
    mutationFn: (foo) => { /* update mutation */ },
    onSuccess() { /* post-update stuff */ }
  });
}

function useArchive() {
  const {mutateAsync: update} = useUpdate();
  return useMutation({
    mutationFn: (foo) => update(foo),
    onSuccess() { /* post-archive stuff */ }
  });
}

function Sidebar() {
    const {mutate: archive} = useArchive();
    const foo = {foo: 'bar'};

    const onArchive = () => archive(foo, {
      onSuccess() { /* post-event stuff */ }
    });

    // ...
}

function useUpdate() {
  return useMutation({
    mutationFn: (foo) => { /* update mutation */ },
    onSuccess() { /* post-update stuff */ }
  });
}

function useArchive() {
  const {mutateAsync: update} = useUpdate();
  return useMutation({
    mutationFn: (foo) => update(foo),
    onSuccess() { /* post-archive stuff */ }
  });
}

function Sidebar() {
    const {mutate: archive} = useArchive();
    const foo = {foo: 'bar'};

    const onArchive = () => archive(foo, {
      onSuccess() { /* post-event stuff */ }
    });

    // ...
}

"Nesting" mutations?

Similar Threads

"Nesting" mutations?

Similar Threads

Similar Threads

Similar Threads