Remixのチュートリアルで気になったことメモ

Remixのチュートリアルをやって気になったことをメモっていく

Tutorial (30m) | Remix remix.run

Client Side Routing

RemixにSPAモードが追加されたのはもう有名な話だが、自分が今取り組んでいるチュートリアルはSPAモードなのかどうかわからない…

Validating Params and Throwing Responses

突然tiny-invariantとかいう謎のライブラリが出てきた…

これか

GitHub - alexreardon/tiny-invariant: A tiny invariant function github.com

A tiny invariant function. Contribute to alexreardon/tiny-invariant development by creating an account on GitHub.

Data Mutations

普通のHTMLフォームはデータを送信するとページがリロードされてナビゲーションが発生するが、Remixはそうならないようにしているらしい。

Deliting Records

<Form
  action="destroy"
  method="post"
  onSubmit={(event) => {
    const response = confirm('Please confirm you want to delete this record.')
    if (!response) {
      event.preventDefault()
    }
  }}
>
  <button type="submit">Delete</button>
</Form>

こんな感じのコードになっている。action属性にdestroyと書いている。

Remixにおいては、この場合contacts.$contactId.destroyというパスに対して送信処理を実行する。

// /app/routes/contacts/$contactId.destroy.tsx
import type { ActionFunctionArgs } from '@remix-run/node'
import { redirect } from '@remix-run/node'
import invariant from 'tiny-invariant'

import { deleteContact } from '../data'

export const action = async ({ params }: ActionFunctionArgs) => {
  invariant(params.contactId, 'Missing contactId param')
  await deleteContact(params.contactId)
  return redirect('/')
}

コンポーネントがないけど、actionをexportするだけでいいだ…

Optimistic UI

とりあえず一旦フィードバックして、失敗したら元に戻すの良いな…