Back to Details

recent-data

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Recent Data Usage Guide

最近使用数据使用指南

Recent data (recentTopics, recentResources, recentPages) is stored in session store.
最近使用数据（recentTopics、recentResources、recentPages）存储在session store中。

Initialization

初始化

In app top-level (e.g., 
RecentHydration.tsx
):
tsx
import { useInitRecentTopic } from '@/hooks/useInitRecentTopic';
import { useInitRecentResource } from '@/hooks/useInitRecentResource';
import { useInitRecentPage } from '@/hooks/useInitRecentPage';

const App = () => {
  useInitRecentTopic();
  useInitRecentResource();
  useInitRecentPage();
  return <YourComponents />;
};
在应用顶层（例如 
RecentHydration.tsx
）：
tsx
import { useInitRecentTopic } from '@/hooks/useInitRecentTopic';
import { useInitRecentResource } from '@/hooks/useInitRecentResource';
import { useInitRecentPage } from '@/hooks/useInitRecentPage';

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

Usage

使用方法

Method 1: Read from Store (Recommended)

方法1：从Store读取（推荐）

tsx
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>
  );
};
tsx
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>
  );
};

Method 2: Use Hook Return (Single component)

方法2：使用Hook返回值（单组件场景）

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

Available Selectors

可用选择器

Recent Topics

最近使用主题

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

const isInit = useSessionStore(recentSelectors.isRecentTopicsInit);
// Type: boolean
RecentTopic type:
typescript
interface RecentTopic {
  agent: { avatar: string | null; backgroundColor: string | null; id: string; title: string | null } | null;
  id: string;
  title: string | null;
  updatedAt: Date;
}
tsx
const recentTopics = useSessionStore(recentSelectors.recentTopics);
// Type: RecentTopic[]

const isInit = useSessionStore(recentSelectors.isRecentTopicsInit);
// Type: boolean
RecentTopic类型定义：
typescript
interface RecentTopic {
  agent: { avatar: string | null; backgroundColor: string | null; id: string; title: string | null } | null;
  id: string;
  title: string | null;
  updatedAt: Date;
}

Recent Resources

最近使用资源

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

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

const isInit = useSessionStore(recentSelectors.isRecentResourcesInit);

Recent Pages

最近使用页面

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

Features

功能特性

  1. Auto login detection: Only loads when user is logged in
  2. Data caching: Stored in store, no repeated loading
  3. Auto refresh: SWR refreshes on focus (5-minute interval)
  4. Type safe: Full TypeScript types
  1. 自动登录检测：仅在用户登录后加载
  2. 数据缓存：存储在store中，避免重复加载
  3. 自动刷新：SWR会在页面获得焦点时刷新（间隔5分钟）
  4. 类型安全：完整的TypeScript类型支持

Best Practices

最佳实践

  1. Initialize all recent data at app top-level
  2. Use selectors to read from store
  3. For multi-component use, prefer Method 1
  4. Use selectors for render optimization
  1. 在应用顶层初始化所有最近使用数据
  2. 使用selectors从store中读取数据
  3. 多组件使用场景下，优先选择方法1
  4. 使用selectors优化渲染性能