Dynamic mutationKey

[alielmajdaoui]

Is there a way to set a mutation key dynamically?
The purpose is to have ability to check pending mutations based on that composite mutation key.

Here's an arbitrary example:

const useUpdateUserMutation() {
  return useMutation({
    mutationKey: ['update_users'],
    mutationFn: ({ id}) => updateUserAPI(id)
    // rest of options
  });
}

function UserList() {
  const mutation = useUpdateUserMutation()
  const updateUser = async (id) => {
    // something to override the mutationKey here maybe?
    await mutation.mutateAsync({ id })
  }
}

function Profile({ userId }) {
  const isMutatingUser = useIsMutating({ mutationKey: ['update_users', userId] })
}

[pilaoda]

I have the same problem. Have you solved it?

[alielmajdaoui]

I used a different approach because I don't think there might be anything to override mutationKey which I also think is not a good idea.

[pilaoda]

Thanks your reply. Finally, I use the mutationCache to build a mutation dynamically, which is bit complicate.

[TkDodo]

if you want the id to be part of the mutationKey, you need to do it like this:

const useUpdateUserMutation(id) {
  return useMutation({
    mutationKey: ['update_users', id],
    mutationFn: () => updateUserAPI(id)
    // rest of options
  });
}

yes, that means you need to have access to the id when you invoke the useUpdateUserMutation(id) hook.

[alielmajdaoui]

Can be something like this: (whole example in this thread is arbitrary)

function UserList() {
  // rest of code
  return <ul>
    {users.map(({id, name, status}) => <li key={id}>{name} <button onClick={() => updateUser(id)}>Update</button></li>}
  </ul>;
}

[TkDodo]

Then you can make each button its own component with its own mutation:

const UpdateUserButton = ({ id, name }) => {
  const { mutate } = useUpdateUser(id)
  
  return <li>{name} <button onClick={() => mutate}>Update</button></li>
}

usage:

function UserList() {
  // rest of code
  return <ul>
    {users.map(({id, name, status}) => <UpdateUserButton key={id} id={id} name={name} />}
  </ul>;
}

[alielmajdaoui]

Awesome! Actually thought about separating it into a new component like you did but wanted to keep it like that just to see if there's something better that we could do.

"There are usually better ways than this"

I am still open to hear more about the other ways...

[pilaoda]

In my case, I'm mutating a tree structure, both parent and child node need to show mutating css class, so I need to mark both them as mutating from one component (Like click delete button in the child node) .

[TkDodo]

You can useMutationState in the parent