【Remix】loaderとは

loaderとは
基本的な使い方
パスパラメータを取得する
リクエストパラメータを取得する
まとめ

loaderとは

loader | Remix

loader関数は
「レンダリング前にサーバーサイドでデータを取得し、HTMLに埋め込んで表示したい」
ときに利用する関数である。

レンダリング時に必要なデータはこれを使って取得すると覚えておけば良い。

基本的な使い方

jsonplaceholderからデータを取得し、画面に表示する機能を以下に実装する。

■routes/details.tsx

import { useLoaderData } from '@remix-run/react';

// 取得するJSONデータの形式を定義
interface Post {
  id: number;
  title: string;
}

export const loader = async (): Promise<Post[]> => {
  // データを取得する
  const response = await fetch('https://jsonplaceholder.typicode.com/posts');
  const posts = (await response.json()) as Post[];
  return posts;
};

export default function Detail() {
  // useLoaderDataを使うことにより、loader関数でretrunしたものを取得できる
  // `<typeof loader>`で自動的に型推論してくれる
  const posts = useLoaderData<typeof loader>();
  return (
    <div>
      <h1>Detail Page</h1>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>title: {post.title}</li>
        ))}
      </ul>
    </div>
  );
}

■結果

パスパラメータを取得する

/posts/1のようにパスパラメータを取得する場合も、loaderを利用する。

引数にparamsを受け取ることによって、参照することができるようになる。

■routes/posts.$id.tsx

URLパスに相当する部分は「.」で区切って、
動的に変更される部分は「$」を利用すれば良い。

import { LoaderFunction, LoaderFunctionArgs } from '@remix-run/node';
import { useLoaderData } from '@remix-run/react';

export const loader: LoaderFunction = async ({
  params,
}: LoaderFunctionArgs) => {
  // データを取得する
  return params.id;
};

export default function Posts() {
  const postId = useLoaderData<typeof loader>();
  return (
    <div>
      <h1>Posts Page</h1>
      <div>パスパラメータ: {postId}</div>
    </div>
  );
}

■結果

リクエストパラメータを取得する

loader関数の引数にrequestを受けることによって使えるようになる。
また、このrequestにはリクエストヘッダなどの情報も含まれているので
Cookieなどを取得するときにも利用する。

■routes/posts.$id.tsx

import { LoaderFunctionArgs } from '@remix-run/node';
import { useLoaderData } from '@remix-run/react';

interface ParamAndQuery {
  paramId: string;
  queryString: string;
}

export const loader = async ({
  request,
  params,
}: LoaderFunctionArgs): Promise<ParamAndQuery> => {
  // データを取得する
  const paramId = params.id ?? '';
  const url = new URL(request.url);
  const query = url.searchParams.get('q') ?? '';
  return {
    paramId: paramId,
    queryString: query,
  };
};

export default function Posts() {
  const parameter = useLoaderData<typeof loader>();
  return (
    <div>
      <h1>Posts Page</h1>
      <div>パスパラメータ: {parameter.paramId}</div>
      <div>リクエストパラメータ: {parameter.queryString}</div>
    </div>
  );
}

■結果