React Router v7 で 無限スクロールを実装して useFetcher を学ぶ

curl https://codeload.github.com/mui/material-ui/tar.gz/master | tar -xz --strip=2 material-ui-master/examples/material-ui-react-router-ts
cd material-ui-react-router-ts

app/
├── routes
│   ├── api
│   │   └── articles.ts # useFetcher でリクエストする記事取得 API
│   └── home.tsx # 記事一覧画面
├── routes.ts
├── types.ts
└── ...

// app/types.ts
export interface Article {
  id: number;
  title: string;
  description: string;
  createdAt: string;
}

export interface FetchArticlesResponse {
  articles: Article[];
  hasMore: boolean;
  currentPage: number;
  totalCount: number;
}

// app/routes/home.tsx
import { useLoaderData } from "react-router";
import { fetchArticles } from "~/utils/mockApi"; // ここではモックを使用してデータを取得します

export async function loader() {
  const data: FetchArticlesResponse = await fetchArticles({ page: 1 });

  return {
    articles: data.articles,
    hasMore: data.hasMore,
    currentPage: 1,
    totalCount: data.totalCount,
  };
}

// app/routes.ts
import { type RouteConfig, index, route } from '@react-router/dev/routes';

export default [
  index('routes/home.tsx'),
] satisfies RouteConfig;

// app/routes/home.tsx に追加
import { useLoaderData } from "react-router";
import {
  Typography,
  List,
  ListItem,
  ListItemText,
  Container,
} from "@mui/material";
import type { Route } from "./+types/home";

export async function loader() {
  // 省略
}

export default function Home({ loaderData }: Route.ComponentProps) {
  const {
	articles,
	hasMore,
  } = loaderData;

  return (
    <Container sx={{ p: 4 }}>
      <List sx={{ mt: 2.5 }}>
        {articles.map((article) => (
          <ListItem key={article.id}>
            <ListItemText>
              <Typography variant="subtitle1">
                {article.title}
              </Typography>
              <Typography variant="body2">
                {article.description}
              </Typography>
            </ListItemText>
          </ListItem>
        ))}
      </List>

      {hasMore && (
        <p>{/* TODO: スクロールしてデータを読み込む */}</p>
      )}
    </Container>
  );
}

// app/routes/api/articles.ts
import { type LoaderFunctionArgs } from "react-router";
import { fetchArticles, addNewArticles } from "~/utils/mockApi";

export async function loader({ request }: LoaderFunctionArgs) {
  const url = new URL(request.url);
  const page = parseInt(url.searchParams.get("page") || "1");

  const data = await fetchArticles({ page });

  return {
    articles: data.articles,
    hasMore: data.hasMore,
    currentPage: page,
    totalCount: data.totalCount,
  };
}

// app/routes.ts
import { type RouteConfig, index, route } from '@react-router/dev/routes';

export default [
  index('routes/home.tsx'),
  route('/api/articles', 'routes/api/articles.ts'), // ← この行を追加
] satisfies RouteConfig;

// app/routes/home.tsx に追加
import {
  Box,
  CircularProgress,
  // ...省略
} from "@mui/material";
// ...省略


export async function loader() {
  // 省略
}

export default function Home({ loaderData }: Route.ComponentProps) {
  const fetcher = useFetcher<FetchArticlesResponse>();
  
  // 状態管理を追加
  const [articles, setArticles] = useState<Article[]>(loaderData.articles);
  const [page, setPage] = useState(loaderData.currentPage);
  const [hasMore, setHasMore] = useState(loaderData.hasMore);
  const [isLoading, setIsLoading] = useState(false);
  
  // 新しいページのデータ取得
  const loadMore = useCallback(() => {
    if (hasMore && fetcher.state === 'idle' && !isLoading) {
      const nextPage = page + 1;
      setPage(nextPage);
      setIsLoading(true);
      fetcher.load(`/api/articles?page=${nextPage}`);
    }
  }, [hasMore, page, fetcher, isLoading]);
  
  // fetcher からデータが返ってきたら統合する
  useEffect(() => {
    const data = fetcher.data;
    if (data?.articles) {
      setArticles(prev => [...prev, ...data.articles]);
      setHasMore(data.hasMore);
      setIsLoading(false);
    }
  }, [fetcher.data]);

  return (
    <Container sx={{ p: 4 }}>
      <List sx={{ mt: 2.5 }}>
        {/* 記事一覧 (省略) */}
      </List>

      {hasMore && (
        <Box sx={{ p: 2.5, textAlign: "center" }}>
          {isLoading ? (
            <CircularProgress size={24} />
          ) : (
            <button onClick={loadMore}>Load more</button>
          )}
        </Box>
      )}
    </Container>
  );
}

npm i -D react-intersection-observer

// app/routes/home.tsx に追加

// ...省略
import { useInView } from 'react-intersection-observer';

export async function loader() {
  // 省略
}

export default function Home({ loaderData }: Route.ComponentProps) {
  // ...省略
  
  // 新しいページのデータ取得
  const loadMore = useCallback(/* 省略 */);
  
  // ...省略
  
  // Intersection Observer のセットアップ
  const { ref: observerRef, inView } = useInView({
    threshold: 0,
    rootMargin: "100px",
  });
  
  // Intersection Observer がトリガーされたら読み込み
  useEffect(() => {
    if (inView && hasMore && fetcher.state === 'idle' && !isLoading) {
      loadMore();
    }
  }, [inView, hasMore, fetcher.state, loadMore, isLoading]);

  return (
    <Container sx={{ p: 4 }}>
      <List sx={{ mt: 2.5 }}>
        {/* 省略 */}
      </List>

      {hasMore && (
        <Box ref={observerRef} sx={{ p: 2.5, textAlign: "center" }}>
          {isLoading ? (
            <CircularProgress size={24} />
          ) : (
            <p>スクロールしてさらに読み込む</p>
          )}
        </Box>
      )}
    </Container>
  );
}