Please help with complex form query state management mess

type EditChapterInput = {
  content: string,
  id: number,
  title?: string
};

const EditChapter = () => {
  const { control, handleSubmit, setValue } = useForm<EditChapterInput>();
  const router = useRouter();
  const { chapterId, storyid } = router.query;
  const session = trpc.useQuery(['auth.getSession']);
  const { data: story } = trpc.useQuery(['story.getByStoryId', { id: Number(storyid) }]);
  const { data: chapter } = trpc.useQuery(['chapter.getById', { id: Number(chapterId) }]);
  const editChapter = trpc.useMutation(['chapter.update']);

  setValue('title', (chapter?.title ? chapter.title : ''));
  setValue('content', (chapter?.content ? chapter.content : ''));

  const onSubmit: SubmitHandler<EditChapterInput> = data => {

    if (session.data && story && chapter) {
      const newChapterData: EditChapterInput = {
        content: data.content,
        id: chapter?.id,
        title: data.title
      };

      editChapter.mutate(newChapterData);
    }
  };