JavaScript・Ajaxを用いた非同期通信のチャット機能を実装したい

Question

前提・実現したいこと

①チャット機能において、JavaScript・Ajaxを使用した非同期通信を実装したいのですが、「チャットしたユーザー名のチャット画面における未定義」だと思われるエラー文が出ます（1度リロードすると送信した文章が表示されます）。
②また、仮にユーザー名を抜いた状態で文章（content）のみを非同期通信にて実装しようとしましたが、これはこれで出来ません（1度リロードしないと反映されません）。

①・②のいずれかだけでも大丈夫ですので、ご回答頂ければ幸いです。

発生している問題・エラーメッセージ

[コンソール]

①
chat.js:3 Uncaught TypeError: Cannot read property 'nickname' of undefined
    at buildHTML (chat.js:3)
    at XMLHttpRequest.XHR.onload (chat.js:28)

※②に関するエラー文は出ませんでした

該当のソースコード

[routes.rb]

Rails.application.routes.draw do
  devise_for :users, controllers: { registrations: 'registrations' }
  get 'chat/:id' => 'chats#show', as: 'chat'
  get 'cats/index'
  root to: "cats#index"
  resources :cats, only: [:new, :create, :show, :edit, :update, :destroy]
  resources :users, only: [:show]
  resources :chats, only: [:create]
end

[chats_controller.rb]

class ChatsController < ApplicationController
  before_action :authenticate_user!, only: [:show, :create]
  def show
    @user = User.find(params[:id])
    rooms = current_user.user_rooms.pluck(:room_id)
    user_rooms = UserRoom.find_by(user_id: @user.id, room_id: rooms)

    unless user_rooms.nil?
      @room = user_rooms.room
    else
      @room = Room.new
      @room.save
      UserRoom.create(user_id: current_user.id, room_id: @room.id)
      UserRoom.create(user_id: @user.id, room_id: @room.id)
    end
    @chats = @room.chats
    @chat = Chat.new(room_id: @room.id)
  end
  def create
    @chat = current_user.chats.new(chat_params)
    @chat.save
    render json:{ post: @chat }
  end

  private
  def chat_params
    params.require(:chat).permit(:content, :room_id)
  end
end

[chats/show.html.erb]

<%= form_with model: @chat, id:"form" do |f| %>
    <%= f.text_field :content, id: "content" %>
    <%= f.hidden_field :room_id %>
    <%= f.submit value: "送信する", class:"chat-btn", id: "submit" %>
<% end %>

<div id="list">
</div>
<table class="chat-table">
  <thead>
    <tr>
      <td>投稿者名</td>
      <td>投稿内容</td>
    </tr>
  </thead>
<tbody>
  <% @chats.each do |chat| %>
    <tr>
      <td><%= chat.user.nickname %></td>
      <td><%= chat.content %></td>
    </tr>
  <% end %>
</tbody>
</table>

[application.js]

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require("../chat")

[chat.js]

const buildHTML = (XHR) => {
  const item = XHR.response.post;
  const html = `
    <tr>
      <td>${item.user.nickname}</td>
      <td>${item.content}</td>
    </tr>`;
  return html;
};

function post (){
  const submit = document.getElementById("submit");
  submit.addEventListener("click", (e) => {
    e.preventDefault();
    const form = document.getElementById("form");
    const formData = new FormData(form);
    const XHR = new XMLHttpRequest();
    XHR.open("POST", "/chats", true);
    XHR.responseType = "json";
    XHR.send(formData);
    XHR.onload = () => {
      if (XHR.status != 200) {
        alert(`Error ${XHR.status}: ${XHR.statusText}`);
        return null;
      };
      const list = document.getElementById("list");
      const formText = document.getElementById("content");
      list.insertAdjacentHTML("afterend", buildHTML(XHR));
      formText.value = "";
    };
  });
};

window.addEventListener('load', post);

試したこと

turbolinksに関しては、遷移前のlink_to内で、data: {"turbolinks"=>false}を記述しています。
また、エラー文について同様の記事を複数見かけましたが、具体的な解決方法が分かりませんでした。

補足情報（FW/ツールのバージョンなど）

ruby 2.6.5p114 (2019-10-01 revision 67812) [x86_64-darwin20]

source 'https://rubygems.org'
git_source(:github) { |repo| "https://github.com/#{repo}.git" }

ruby '2.6.5'

gem 'rails', '~> 6.0.0'

gem 'mysql2', '>= 0.4.4'

gem 'puma', '~> 3.11'

gem 'sass-rails', '~> 5'

gem 'webpacker', '> 4.0'
https://github.com/turbolinks/turbolinks
gem 'turbolinks', '> 5'

gem 'bootsnap', '>= 1.4.2', require: false

group :development, :test do
gem 'capistrano'
gem 'capistrano-rbenv'
gem 'capistrano-bundler'
gem 'capistrano-rails'
gem 'capistrano3-unicorn'
gem 'rspec-rails'
gem 'factory_bot_rails'
gem 'faker'
end

group :development do
gem 'rubocop', require: false

gem 'web-console', '>= 3.3.0'
gem 'listen', '>= 3.0.5', '< 3.2'

gem 'spring'
gem 'spring-watcher-listen', '~> 2.0.0'
end

group :test do
gem 'capybara', '>= 2.15'
gem 'selenium-webdriver'
gem 'webdrivers'
end

group :production do
gem 'unicorn', '5.4.1'
end

gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]
gem 'devise'
gem 'pry-rails'
gem 'mini_magick'
gem 'image_processing', '~> 1.2'
gem 'active_hash'

Answer 1

xhrでは煩雑で無理が多いと思います
よほど古いブラウザに対応する必要がないならfetchでの実装がベターです

Comments

[ro-ru_ke-to]

ご回答ありがとうございます。fetchでの実装はやったことがないので、色々調べて試してみます！