RemixのuseLoaderDataとuseActionDataに型推論が追加されました

はじめに

こんにちは、CX事業本部Delivery部MADグループの森茂です。

Remix v1.6.5のリリースにuseLoaderDataとuseActionDataの型推論が追加されました。普段Remixを利用していないといったい何のこと？と思われるかもしれません。しかしRemixでアプリケーションを開発しているユーザーにとっては非常に大きなDX改善となっているので紹介させてください:)

useLoaderDataとuseActionData

Remixでは、APIからデータを取得するなどサーバーサイド側でデータの処理を行い、そのデータをフロント側へ渡す際useLoaderDataという関数を利用します。また、フォームのデータをやり取りするためにはuseActionDataという関数を利用します。どちらもRemixでアプリケーションをつくる際には一番利用する関数と言えるかもしれません。

追加された型推論について

v1.6.4までは、LoaderFunctionとして用意した関数内でデータを取得し、useLoaderDataで受け取る場合には型情報はユーザーがジェネリクス、もしくは型アサーションを利用して付与していました。（以降useLoaderDataについてのみ記載していますが、useActionDataにも同様の仕様追加がされています）

たとえば、User型のデータを取得するLoader Functionがあるとすると。

type User = {
  id: number
  name: string
}

export const loader: LoaderFunction = async () => {
  const userData = {
    id: 1,
    name: 'foo',
  };

  return json<User>(userData);
};

LoaderFunctionからUser型情報についてはフロント側には渡らないため、自身で型を付与させる必要がありました。

// ジェネリクスを利用
const userData = useLoaderData<User>();
// または型アサーションを利用
const userData = useLoaderData() as User

この方法では型情報に変更が入るたびに双方を書き換える必要があり、ミスによって誤った型があたってしまう可能性も高いため、とても面倒な作業となっていました。

v1.6.5では、DX改善を謳いuseLoaderDataでtypeofを利用した型推論を効かせることができるようになりました。

これにより、従来の方法だとUser型を用意して、その型をジェネリクス、型アサーションで都度記載していましたがuseLoaderDataへtypeof loaderを渡すだけでuserDataに型推論が効くようになります。

// LoaderFunction型は利用しない
export const loader = async () => {
  const userData = {
    id: 1,
    name: 'foo',
  };

  return json(userData);
};

フロント側の記載はこれだけです。

const userData = useLoaderData<typeof loader>();

また従来は型をキャストしているだけであったので、JSONで利用できないDate型などもそのまま渡ってしまっていましたが、JSON.parseできないものは渡せないように変更されています。

なお、loader内で利用するcontext、request、paramsはLoaderFunction型を利用せずにLoaderArgsという型が利用できるようになっています。

export const loader = async ({ context, request, params }: LoaderArgs) => {
  const userData = {
    id: 1,
    name: 'foo',
  };

  return json(userData);
};

次回に持ち越し

なお、ジェネリクスを指定しない場合、現在はany型となっています。できればunknown型となってほしいところですが破壊的変更になるという議論もあり、対応は次回に持ち越されたようです。

const userData = useLoaderData(); // userDataはanyとなる

さいごに

Remix v1.6.5で追加された型推論について紹介させていただきました。機能の追加だけでなく議論されていた使い勝手のアップデートが入るもユーザーにとってうれしいものですね:)海外のSNS界隈ではサーバーサイドとフロントエンドの境界を越えた型推論の実装にユーザーだけでなくライブラリの開発者も話題にあげているようでした。

まもなくStreaming SSR周りの大きなアップデート（現在はまだexperimental）が入りそうなのでRemixのこれからの進化にも期待です！

参考情報