Today I learned that the useMutation API which Apollo Client provides takes onCompleted callback function. The callback will be called when the mutation successfully completes.

const MyPage: NextPage = () => {
  const router = useRouter()
  const [theMutation, { loading, error }] = useMutation(THE_MUTATION, {
    onCompleted() {
      router.push('/transition-to-here-after-the-mutation')
    },
  })

  // the rest of the component implementation goes here...
}

The onCompleted option is listed in the document for sure and I should have known it but somehow been overlooking it.

See Also