Struggling with basic use of useMutation | TanStack | Page 1

My app is not updating when i call useMutation on the button click, i have to refresh the page.

// - Fetch todos from API
async function getUsers() {
  const response = await fetch(
    'https://api-for-personal-projects.vercel.app/api/contacts'
  )
  return response.json()
}

//- Main component
interface TodosProps {
  className?: string
}

export default function Todos({ className }: TodosProps) {
  const queryClient = new QueryClient()

  const { data, isLoading, isError } = useQuery(['users'], getUsers)

  console.log('data', data)

  const useUpdateUsers = useMutation(
    (newUser: any) => {
      return axios.post(
        'https://api-for-personal-projects.vercel.app/api/contacts',
        newUser
      )
    },
    {
      onSuccess: () => {
        //  refetch users list
        queryClient.invalidateQueries(['users'])
      }
    }
  )

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

  if (isError || !Array.isArray(data)) {
    return <div>Error</div>
  }
  return (
    <div className={className}>
      <button
        className="my-2 font-bold"
        onClick={() =>
          useUpdateUsers.mutate({
            id: 54,
            firstName: 'david',
            lastName: 'Adesanya',
            dateOfBirth: '1985-03-15T00:00:00',
            school: 'Torquay Boys',
            phoneNumber: '01803 123456'
          })
        }
      >
        Add User
      </button>
      {data.map((user: any) => (
        <div key={user.id}>{`${user.firstName} ${user.lastName}`}</div>
      ))}
    </div>
  )
}

Struggling with basic use of useMutaion

Struggling with basic use of useMutation

#Struggling with basic use of useMutation