recent-data

最近のデータの使用ガイド

最近のデータ（recentTopics、recentResources、recentPages）はセッションストアに保存されます。

初期化

アプリのトップレベル（例：RecentHydration.tsx）で：

import { useInitRecentTopic } from '@/hooks/useInitRecentTopic';
import { useInitRecentResource } from '@/hooks/useInitRecentResource';
import { useInitRecentPage } from '@/hooks/useInitRecentPage';

const App = () => {
  useInitRecentTopic();
  useInitRecentResource();
  useInitRecentPage();
  return <YourComponents />;
};

使用方法

方法 1：ストアから読み取る（推奨）

import { useSessionStore } from '@/store/session';
import { recentSelectors } from '@/store/session/selectors';

const Component = () => {
  const recentTopics = useSessionStore(recentSelectors.recentTopics);
  const isInit = useSessionStore(recentSelectors.isRecentTopicsInit);

  if (!isInit) return <div>Loading...</div>;

  return (
    <div>
      {recentTopics.map((topic) => (
        <div key={topic.id}>{topic.title}</div>
      ))}
    </div>
  );
};

方法 2：フックの戻り値を使用する（単一コンポーネント）

const { data: recentTopics, isLoading } = useInitRecentTopic();

利用可能なセレクター

最近のトピック

const recentTopics = useSessionStore(recentSelectors.recentTopics);
// Type: RecentTopic[]

const isInit = useSessionStore(recentSelectors.isRecentTopicsInit);
// Type: boolean

RecentTopic 型：

interface RecentTopic {
  agent: {
    avatar: string | null;
    backgroundColor: string | null;
    id: string;
    title: string | null;
  } | null;
  id: string;
  title: string | null;
  updatedAt: Date;
}

最近のリソース

const recentResources = useSessionStore(recentSelectors.recentResources);
// Type: FileListItem[]

const isInit = useSessionStore(recentSelectors.isRecentResourcesInit);

最近のページ

const recentPages = useSessionStore(recentSelectors.recentPages);
const isInit = useSessionStore(recentSelectors.isRecentPagesInit);

機能

1. ログインの自動検出：ユーザーがログインしている場合にのみ読み込みます
2. データのキャッシュ：ストアに保存されるため、繰り返し読み込む必要はありません
3. 自動更新：SWR はフォーカス時に更新します（5 分間隔）
4. 型安全：TypeScript の型を完全にサポートします

ベストプラクティス

1. アプリのトップレベルで最近のデータをすべて初期化します
2. セレクターを使用してストアから読み取ります
3. 複数のコンポーネントで使用する場合は、方法 1 を優先します
4. レンダリングを最適化するためにセレクターを使用します