Remix
routing
印象は良い
loader で throw new Response したらいいのもいいね
<Form action="edit"> で route の ..._edit.tsx にいくのか
これは GET
Action の引数は {params, request, context?}
単に loader が GET、action が POST 対応でいいんかねえ
GET 以外が action、action 実行してから loader が実行される
FormData を fetch で送るのもまあ素朴で印象いい、読むのも request.formData()
destroy で action だけのルートの例
_index.tsx は何もないときの Outlet として働く
useNavigate して navigate(-1) で戻る
ページロード中の状態取得などは useNavigation の方
useFetcher は fetcher.formData に state があるのか
useState 使うだろうなというところも useEffect で DOM プロパティに値をセットしているし、controlled component 好きじゃないのかな?
気になり
? Outlet の中から外の Context 読めるの? Root に Provider 色々入れて良い?
? SSR しつつ CSR でキャッシュを参照しつつ GraphQL 叩けるか
大体同じことをする必要がありそう
Resource Route
export default していなければ Resource Route
GET なら loader, POST, PUT, PATCH, or DELETE なら action
fetcher.Form のイベントハンドラから form を送る
ev.target.form.requestSubmit()
.server/ ディレクトリに入れることでサーバーサイドのコードであることを明示できる
隠しファイルとして普段の ls で見えなくなるから lib.server/ とかにしたいがディレクトリはいけるのか?
Nested Routes と Outlet
最初よくわかってなかった
table:routes
file path 説明
books.$bookId.tsx /books/* 以下共通レイアウト、Outlet 要る
books.$bookId._index.tsx /books/123
books.$bookId.chats.$chatId.tsx /books/123/chats/456
books.$bookId_.page.tsx /books/123/page 後置 _ で親のレイアウトを拒否する
_books.foo.tsx /foo 前置 _ で URL からパスを隠す(レイアウトは使う)
Outlet ないならレイアウトだけ表示される