trigger and dynamic key

[wonskarol]

👋🏻 Hey there,

I'm new to SWR and I'm trying to adopt useSWRMutation in my project and I've stumbled upon an issue I'm not sure how to solve with this hook.
I've an API endpoint to remove a user based on their id:

DELETE
  /users/:id

Then, I have a component that renders all users and this component is responsible to handle all the logic & actions (eg. removing users):

return users.map(({ id, name }) => <User key={id} id={id} name={name} onRemove={handleUserRemove}/>)

handleUserRemove gets user id as and argument:

const handleUserRemove = (id) => {
  // remove user based on id
}

And this is where I have the problem:

const Users = () => {
  const { data: users } = useSWR('/users'); 
  const { trigger } = useSWRMutation('/users/:id', deleteUser);
  
  const handleUserRemove = (id) => {
    // how to dynamically pass the `:id`?
    trigger();
  }
 
  return users.map(({ id, name }) => <User key={id} id={id} name={name} onRemove={handleUserRemove}/>)
}

One of the solutions could be moving the "remove" responsibility down to Users component, like this:

const User = ({ id, name }) => {
  const { trigger } = useSWRMutation(`/users/${id}`, deleteUser);
  
  const handleUserRemove = (id) => () => {
    trigger();
  }
 
  return <div>{name}<button onClick={handleUserRemove(id)}>delete</button></div>;
}

But it doesn't follow the pattern I use across the whole application - in my case User component is "dumb", it should be generic and without any business logic. Of course I could create a wrapper only to handle the remove action:

const DeleteUser = ({ id, name }) => {
  const { trigger } = useSWRMutation(`/users/${id}`, deleteUser);
  
  const handleUserRemove = (id) => {
    trigger();
  }
 
  return <User id={id} name={name} onRemove={handleUserRemove}/>

but I would like to avoid such wrappers.

Any ideas are appreciated 🙏🏻

[justhonnoldwegoinghome]

I am facing the same issue. Tightly coupling a trigger to its id at the top level of a component seems like the only option to me now. Don't love it of course. Did you find a better alternative?

[pociej]

And what is your deleteUser implementation? You can pass argument to trigger function and then this argument is passed to the fetcher. So something like this should work if I understood your needs properly. Right?

async function deleteUser(_url, { arg }) {
  await fetch(`/users/${arg}`, {
    method: 'DELETE',
  })
  // probably some headers goes here 
}

const { trigger } = useSWRMutation('thisIsKeyNotNecessarilyUrl', deleteUser); 

const handleUserRemove = (id) => {
  trigger(id);
}