Custom mutation hook with arguments

[SevenOutman]

Hi, I don't see many discussions or examples around this topic where we wrap custom mutation hooks to take arguments as dependencies.

For example, I'm mutating a Comment of a Post via the following api endpoints:

PUT /api/posts/{postId}/comments/{commentId}
DELETE /api/posts/{postId}/comments/{commentId}

Now I have several ways to wrap a useUpdateComment mutation:

Approach 1: Spread path parameters along with request payload as the mutate input

function useUpdateComment() {
  return useMutation(({ postId, commentId, ...payload }) => http.put(`/api/posts/${postId}/comments/${commentId}`, payload));
}
function useDeleteComment() {
  return useMutation(({ postId, commentId }) => http.delete(`/api/posts/${postId}/comments/${commentId}`));
}

// Usage
const { mutate: updateComment } = useUpdateComment();
const { mutate: deleteComment } = useDeleteComment();

updateComment({ postId, commentId, ...formValue })
deleteComment({ postId, commentId })

This is the default approach that I've seen in every example and discussion - the custom hooks don't take arguments.

But imagine I'm on the post's detail page where the post's id is very commonly available through a router, I tend to think of postId as dependency rather than variable input. Now the problem is that I have to pass this common postId to every mutations on every comments.

const { postId } = useParams();

{comments.map(comment => <>
  // postId looks like alien here 🤨
  <button onClick={() => updateComment({ postId, commentId: comment.id, ...formValue })}>Update this comment</button>
  <button onClick={() => deleteComment({ postId, commentId: comment.id })}>Delete this comment</button>
</>)}

To push this case further, imagine I'm having api endpoints with more path parameters like:

/api/users/{userId}/teams/{teamId}/projects/{projectId}/tasks/{taskId}

const { userId, teamId, projectId } = useParams();

{tasks.map(task => <>
  // Aliens invasion 😨
  <button onClick={() => updateTask({ userId, teamId, projectId, taskId: task.id, ...formValue })}>Update this task</button>
  <button onClick={() => deleteTask({ userId, teamId, projectId, taskId: task.id })}>Delete this task</button>
</>)}

With this, I'd like to focus the updateComment mutation on things only about the Comment. So here's the second approach.

Approach 2: Custom mutation hook takes arguments that's then used closured

function useUpdateComment(postId) {
  return useMutation(({ commentId, ...payload }) => http.put(`/api/posts/${postId}/comments/${commentId}`, payload));
}
function useDeleteComment(postId) {
  return useMutation((commentId) => http.delete(`/api/posts/${postId}/comments/${commentId}`));
}

// Usage
const { postId } = useParams();

const { mutate: updateComment } = useUpdateComment(postId);
const { mutate: deleteComment } = useDeleteComment(postId);

updateComment({ commentId, ...formValue })
deleteComment(commentId)

Now I have clean and undistracted mutation calls without repeated "alien" variables.

{tasks.map(task => <>
  <button onClick={() => updateTask({ taskId: task.id, ...formValue })}>Update this task</button>
  <button onClick={() => deleteTask(task.id)}>Delete this task</button>
</>)}

Hope to know what you guys think about the arguments approach.

[TkDodo]

I do it the same way. My rule of thumb is: Only variables, so things that change, should be passed to .mutate or .mutateAsync. The things that are the same for each invocation of the mutation (in the scope of my component) should go to useMutation.

This basically "binds" the instance of useMutation to a single usage. Custom hooks could even return multiple methods, like:

const { update, delete } = usePostMutations(1)

basically returning one update and one delete method for post with id 1. In the custom hook, this would be two useMutations.

Or, when reading from the router, you could scope that to within the custom hook:

function useUpdateComment() {
  const { postId } = useParams();
  return useMutation(({ commentId, ...payload }) => http.put(`/api/posts/${postId}/comments/${commentId}`, payload));
}

we do this a lot if every invocation of the hook would read from params anyways. It's the biggest advantage of custom hooks: That you can enclose functionality like this by wrapping over multiple, other hooks.

[SevenOutman]

Thanks for sharing!

May I ask a further question about this pattern. Say I have a posts list page and a post detail page. The routing declaration goes

/posts
/posts/:id

On both pages user can delete posts.

• List page: Delete a single post by clicking the row displaying it
• Detail page: Delete the current viewing post

Both actions are done via the same api endpoint

DELETE /api/posts/:id

Difference is that, on the list page I can't get the id of the post to delete before user attempt to perform the action, while on the detail page the post's id is fixed.

Now I have 2 ways of defining this mutation:

Option 1

function useDeletePost(id) {
  return useMutation(() => http.delete(`/api/posts/${id}`));
}

This is not usable on the list page.

Option 2

function useDeletePost() {
  return useMutation(id => http.delete(`/api/posts/${id}`));
}

This is usable on both the list page and the detail page, but kinda breaks the "only variables" rule (when used on the detail page).

Should I define two separate mutations in this scenario or just use the second one?

[TkDodo]

I think even on the list you can bind your mutation to an id. Pseudo code:

function List() {
  const { data } = useListQuery()
  data?.map(detail => <Detail key={detail.id} id={detail.id} />)
}

function Detail({ id }) {
  const { data } = useDetailQuery(id)

  render detail data and:
  <DeleteDetail id={id} />
}

function DeleteDetail({ id }) {
  const { mutate } = useDeleteMutation(id)

  <button onClick={() => mutate() } />
}

the idea is basically to have one mutation per row, rather than one mutation per list with variable arguments. It will also give you separate loading / error states and callbacks because the mutations are separated.

[SevenOutman]

the idea is basically to have one mutation per row, rather than one mutation per list with variable arguments

That makes great sense. Thank you!

[franciscohanna92]

@TkDodo It's a very common case to make an invalidation in onSuccess of the mutation. How do you go about passing mutation callbacks when using a custom mutation hook?

[TkDodo]

not sure I understand the question. Usually, a useCreateTodo mutation knows that it has to invalidate todos in onSuccess, so why would I need to pass this as an argument? But it's definitely possible like:

const useAddTodo = (onSuccess) => useMutation(addTodo, { onSuccess })

[VariabileAleatoria]

Is there any reason (apart from philosophical ones) to prefer passing arguments to mutation function vs to the hook function?
I'm talking in particular about controlled input forms, where the value that is passed to the mutation is in state variables, so it should be able to be passed as argument to the custom hook on every render, but for some reason I never see it used like that and most of the times state variables are passed as argument to the mutate function.