Flag to prioritize mutation.mutate()'s side effects

[zachdtaylor]

Here's my situation:

I've built a very basic contact book app. On the main page, you can see a list of contacts. When you click on a contact, you can see details about that contact, and you can delete that contact. Upon deleting the contact, you are automatically re-routed back to the main page.

On the contact detail page, I'm using a query to get the contact information:

export const usePerson = (id) => {
  return useQuery(["person", id], () => client(`/api/people/${id}`));
};

and a mutation to delete the contact:

export const useDeletePerson = () => {
  const queryClient = useQueryClient();
  return useMutation(
    (variables) => client(`/api/people/${variables.id}`, { method: "DELETE" }),
    {
      onSuccess: (data, variables) => {
        queryClient.removeQueries(["person", variables.id]);
      },
    }
  );
};

And here's the component (for reference, I'm using Next.js):

export default function Person() {
  const router = useRouter();
  const { id } = router.query;
  const person = usePerson(id);
  const deletePerson = useDeletePerson();

  const handleDelete = () => {
    deletePerson.mutate(
      { id },
      {
        onSuccess: () => router.push("/"),
      }
    );
  };

  // ... jsx
}

When the user clicks the delete button, handleDelete is called, which calls the deletePerson.mutate() function and pushes a new route onto the router on success. Because I don't want stale queries in the cache, you'll notice that I call queryClient.removeQueries in the mutation's onSuccess handler.

The problem is that the query actually doesn't get deleted from the cache. Well, it does... but not before a new instance of the query is mounted with blank data (because of the usePerson(id)).

So the flow is: user clicks delete -> mutation.mutate() is called -> queryClient.removeQueries() is called -> new instance of query mounts -> router.push("/")

I realize I could just move the router.push("/") into the useDeletePerson hook, right before the call to removeQueries, but I like to keep UI effects in my components, separate from data effects, so I'd prefer not to do that.

As of right now, I don't think there would be a way to call router.push("/") before removeQueries while keeping them separated. Maybe we could add a flag somewhere to allow you to prioritize muatate()'s instance of onSuccess?

[TkDodo]

useDeletePerson can accept a callback that you can invoke before removeQueries.

[zachdtaylor]

That's true. I guess I like keeping things in the onSuccess API because it's more clear what the callback is for. I'll probably take your idea and alter it a bit by having useDeletePerson take an object with an onSuccess attribute. That way I can kind of keep the same API. Thanks for the response!