RemixのloaderでDate型がstringになるのを防ぐ
はじめに
今回紹介する方法はRemix標準で修正するのではなく、remix-typedjson
というライブラリを使用する方法を取っています。
また、私の使用している環境は以下のようになっています。
{
"@remix-run/node": "^1.13.0",
"@remix-run/react": "^1.13.0",
"@remix-run/serve": "^1.13.0",
"remix-typedjson": "^0.1.7"
}
それでは、さっそく見ていきましょう
パッケージのインストール
pnpm add remix-typedjson
loader
の修正
Remixは幾つかのバージョンを経て、loaderからの型推論が進化しています。そのため、remix-typedjson
にも書いてある以下のように✅がついている書き方ではないと正しく動作しません。
❌ export const loader: LoaderFunction = async ({request}) => {}
✅ export const loader = async ({request}: LoaderArgs) => {}
✅ export async function loader({request}: LoaderArgs) {}
戻り値を返す際は@remix-run/node
のjson
ではなく、remix-typedjson
のtypedjson
を使用します。
import { typedjson } from "remix-typedjson";
return typedjson(
{ greeting: 'hello', today: new Date() },
// ResponseInit is optional, just like the `json` helper
{ headers: { 'set-header': await commitSession(session) } },
)
useLoaderData
の修正
以下のように @remix-run/react
のuseLoaderData
ではなく、remix-typedjson
の useTypedLoaderData
というものを使用します。
import { useTypedLoaderData } from "remix-typedjson";
const loaderData = useTypedLoaderData<typeof loader>()
他にもたくさん
全部紹介すると長くなってしまうので、ここからはRemix標準のものを remix-typedjson
ライブラリに置き換える場合の変換表としてご紹介します。
Remix | remix-typedjson |
---|---|
useActionData | useTypedActionData |
useRouteLoaderData | useTypedRouteLoaderData |
useFetcher | useTypedFetcher |
redirect | redirect |
MetaFunction | TypedMetaFunction |
もっと詳しく知りたいという方は以下がリポジトリになるので是非見てみましょう!
内包されないの?
このライブラリの機能は普通に便利なのでRemixに内包されて欲しいですが、現状はないように感じます。理由は以下のIssueのコラボレーターの方の発言です。
他にもRemixで remix-typedjson
が使用している superjson
というライブラリを内包するようにするという議論がありますが今のところ進捗はありません。
また、議論の作者であるsergiodxaさんが以下のようなメッセージを議論の最初に追記しています。
Note: I no longer think this is something that should be added, also @kiliman remix-typedjson is a great and simple to use tool.
最後に
prismaなどをloader
内で使用している際にDate
型があるとString
型になってしまい、エディター上のエラーがよく出ていてうーんと思っていたので、そういう方のお役に立てば幸いです
Discussion
useLoaderData
のレスポンスの型がこうなってしまって悩んでいたところ、この記事で解決しました!お役に立てたようで何よりです!
ここまで書かれてあるの助かります🙇🏻♂️👏🏻