With apollo, i want one component to do a mutation but i need another component to access that mutation's loader. How do this without lifting up state

Question

currently I am doing something like this:

Component A calls the delete mutation on click.

const ComponentA = () => {
  const [
    deleteAttribute,
    { loading: deleteAttributeLoading }, // this loading variable does indeed get set to true when the mutation is called.
  ] = useDeleteAttributeMutation({
    context,
    notifyOnNetworkStatusChange: true,
  });

 const handleDeleteClick = () => {
   deleteAttribute()
 }
...
}

Component B, subscribes to the loader of the delete mutation in order to show a loader

const ComponentB = () => {
  const [
    deleteAttribute,
    { loading: deleteAttributeLoading },
  ] = useDeleteAttributeMutation({
    context,
    notifyOnNetworkStatusChange: true,
  });

  return (
     deleteAttributeLoading && <Loader/> // deleteAttributeLoading does not get set to true when the mutation is called
  )
}

However the loader in ComponentB does not get set to true when deleteMutaiton is called in ComponentA. it only gets set to true in ComponentA. How do i fix this without lifting up state?

I don't see a way to do this without hoisting state - there is no shared state in a mutation or query. — Michel Floyd, Mar 28 '23 at 22:47

With apollo, i want one component to do a mutation but i need another component to access that mutation's loader. How do this without lifting up state

0 Answers0