score:2

Accepted answer
const queryClient = useQueryClient()

const Component = () => {
  const { isLoading, data: followers } = useQuery('followers')
  const mutationFollow = useMutation(
    follower => {
      return axios.post('/follow', follower)
    },
    {
      onSuccess: () => {
        queryClient.invalidateQueries('followers')
      },
    },
  )

  const mutationUnfollow = useMutation(
    follower => {
      return axios.post('/unfollow', follower)
    },
    {
      onSuccess: () => {
        queryClient.invalidateQueries('followers')
      },
    },
  )

  if (isLoading) {
    return <div>Loading...</div>
  }

  return followers.map(item => (
    <div>
      <button
        onClick={() => {
          mutationFollow.mutate({ id: item.id })
        }}
      >
        Follow
      </button>
      <button
        onClick={() => {
          mutationUnfollow.mutate({ id: item.id })
        }}
      >
        Unfollow
      </button>
    </div>
  ))
}

Related Query

More Query from same tag