Frontend Api

フロントエンド API 実装

API クライアント構造

// api/yourApi.ts
import { apiClient } from '@/lib/apiClient';

export interface YourData {
  id: string;
  field1: string;
  field2: number;
}

export interface BulkCreateResponse {
  inserted: number;
  total: number;
}

export const yourApi = {
  list: () =>
    apiClient.get<YourData[]>('/your-route', { withCredentials: true }),

  bulkCreate: (items: Omit<YourData, 'id'>[]) =>
    apiClient.post<BulkCreateResponse>(
      '/your-route/bulk',
      { items },
      { withCredentials: true }
    ),

  deleteAll: () =>
    apiClient.delete('/your-route/all', { withCredentials: true }),
};

データ取得フック

// hooks/useYourData.ts
import { useState, useEffect } from 'react';
import { yourApi, YourData } from '@/api/yourApi';
import { useAuth } from '@/hooks/useAuth';

export function useYourData() {
  const { isAuthenticated } = useAuth();
  const [data, setData] = useState<YourData[]>([]);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    if (!isAuthenticated) return;

    const fetchData = async () => {
      setLoading(true);
      try {
        const response = await yourApi.list();
        setData(response.data);
      } catch (e) {
        setError('データの取得に失敗しました');
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, [isAuthenticated]);

  return { data, loading, error, setData };
}