u-fit/frontend/src/user/components/LogoutButton.tsx

import { useUserLogoutMutation, CurrentUserDocument } from '../../gql'

interface LogoutButtonProps {
  title?: string
}

const LogoutButton = ({ title }: LogoutButtonProps) => {

  const [logout, { loading, error }] = useUserLogoutMutation(
    { refetchQueries: [{ query: CurrentUserDocument }] }
  )

  return (
    <button disabled={loading} onClick={async (event: React.SyntheticEvent) => {
      try {
        const data = await logout()
        console.log('LogoutButton', data)
      } catch (error) {
        console.log('LogoutButton', error)
      }
    }}>{title || 'Log out'}</button>
  )
}

export default LogoutButton