3

Turbolinks から Turbo にアップグレードしようとしていますが、クライアントがフォーム送信のリダイレクトをレンダリングしていないことがわかりました。

バージョン:

  • レール 6.1.4
  • ホットワイヤーレール 0.1.2
  • @hotwired/turbo-rails 7.0.0-beta.8

今のところ、Turbo と Devise の間の非互換性は無視しました。Turbo を無効にすることなく、通常のフォームを機能させようとしているだけです。

アクションの例を次に示します。

def update
  authorize @label
  @label.update(label_params)
  if @label.save
    redirect_to document_labels_path(document_id: @document.id)
  else
    render :new, status: :unprocessable_entity
  end
end

レンダリングされたフォームは次のとおりです。

<form class="simple_form new_label" id="label_form" novalidate="novalidate" action="/documents/72/labels" accept-charset="UTF-8" method="post">
...
</form>

有効なフォームを送信すると、サーバーはProcessing by LabelsController#create as TURBO_STREAM302 を正しく送信します。その後、リダイレクト先の 200 を送信します。ただし、ブラウザは送信されたフォームを見るだけです。リダイレクト ステータスを 303 に変更しても、何も変わりません。

Turbo イベントごとに console.log を追加しました。

document.addEventListener("turbo:load", function () {
  console.log('TURBO:LOAD')
})
document.addEventListener("turbo:click", function () {
  console.log('TURBO:CLICK')
})
document.addEventListener("turbo:before-visit", function () {
  console.log('TURBO:BEFORE-VISIT')
})
document.addEventListener("turbo:visit", function () {
  console.log('TURBO:VISIT')
})
document.addEventListener("turbo:submit-start", function () {
  console.log('TURBO:SUBMIT-START')
})
document.addEventListener("turbo:before-fetch-request", function () {
  console.log('TURBO:BEFORE-FETCH-REQUEST')
})
document.addEventListener("turbo:before-fetch-response", function () {
  console.log('TURBO:BEFORE-FETCH-RESPONSE')
})
document.addEventListener("turbo:submit-end", function (event) {
  console.log('TURBO:SUBMIT-END')
  // event.detail
})
document.addEventListener("turbo:before-cache", function () {
  console.log('TURBO:BEFORE-CACHE')
})
document.addEventListener("turbo:before-stream-render", function () {
  console.log('TURBO:BEFORE-STREAM-RENDER')
})
document.addEventListener("turbo:render", function () {
  console.log('TURBO:RENDER')
})

これは、フォーム送信が成功した場合の出力です。

TURBO:BEFORE-FETCH-REQUEST
TURBO:SUBMIT-START
TURBO:BEFORE-FETCH-RESPONSE
TURBO:SUBMIT-END

レンダリング イベントはありません。それを調査event.detail.fetchResponse.responseするturbo:submit-endと、クライアントがリダイレクトする必要があることを完全に認識しているようですが、そうではありませんでした。

Response {type: "basic", url: "http://lvh.me:3000/documents/72/labels", redirected: true, status: 200, ok: true, …}
body: (...)
bodyUsed: true
headers: Headers {}
ok: true
redirected: true
status: 200
statusText: "OK"
type: "basic"
url: "http://lvh.me:3000/documents/72/labels"
__proto__: Response
4

2 に答える 2