Web/Native API層共通化戦略

# プロジェクトの時系列
2023~  Web (React Router v7) 本番稼働中
2025~  Mobile (React Native/Expo) PoC 開始 <-- いまここ

# WebView で困ること
- Push通知のハンドリングが困難
- カメラ・写真ライブラリへのアクセスが煩雑
- 生体認証（Face ID / Touch ID）が使えない
- オフライン時の挙動が不安定
- ネイティブのナビゲーション体験が出せない
- App Store / Google Play の審査で弾かれるリスク

# 判断フロー
WebView で十分？
├── Push通知不要 & 課金なし & 情報閲覧のみ → WebView でOK
└── それ以外 → React Native を検討

// loader でサーバーサイドデータ取得
export async function loader({ params }: LoaderFunctionArgs) {
  const user = await getUser(params.userId);
  return { user };
}

export default function UserPage() {
  const { user } = useLoaderData<typeof loader>();
  return <UserProfile user={user} />;
}

// TanStack Query でクライアントサイドデータ取得
export default function UserScreen() {
  const { data: user, isLoading } = useQuery({
    queryKey: ['user', userId],
    queryFn: () => getUser(userId),
  });

  if (isLoading) return <LoadingSpinner />;
  return <UserProfile user={user} />;
}

# OpenAPI からの自動生成フロー

OpenAPI 定義（1つ）
    │
    ├── orval → Web 用（SWR hooks + customFetch）
    ├── orval → Mobile 用（fetch + customFetch）
    └── orval → Backend 用（S2S fetch）

taiyaki/
├── openapi/
│   └── openapi.yml                # BFF の API 定義
├── packages/
│   ├── frontend/                  # React Router v7 (Web)
│   │   ├── orval.config.ts
│   │   ├── app/custom-fetch.ts    # Cognito + AWS SigV4
│   │   └── app/api-client/       # ← Orval 生成: SWR hooks
│   ├── mobile/                    # React Native (Expo)
│   │   ├── orval.config.ts
│   │   ├── src/clients/.../custom-fetch.ts  # Token 直接送信
│   │   └── src/clients/.../generated/       # ← Orval 生成: fetch
│   └── backend/                   # Hono BFF
│       └── src/handlers/          # ← Orval 生成: Hono handlers

export default defineConfig({
  appClient: {
    input: {
      target: "../../core-api/openapi/_generated.yaml",
    },
    output: {
      mode: "tags-split",
      target: "./app/api-client",
      client: "swr",            // ← SWR hooks を生成
      httpClient: "fetch",
      mock: { type: "msw", delay: 0 },  // ← MSW モックも自動生成
      override: {
        mutator: {
          path: "app/custom-fetch.ts",
          name: "customFetch",   // ← Cognito 署名付き fetch
        },
      },
    },
  },
  // Zod バリデーションも同時生成
  appClientZod: {
    output: { client: "zod", fileExtension: ".zod.ts" },
  },
});

export default defineConfig({
  appClient: {
    input: {
      target: "../../core-api/openapi/_generated.yaml",
    },
    output: {
      mode: "tags-split",
      target: "./src/clients/api-client/generated",
      client: "fetch",           // ← 素の fetch 関数を生成（hooks なし）
      httpClient: "fetch",
      override: {
        mutator: {
          path: "src/clients/api-client/custom-fetch.ts",
          name: "customFetch",   // ← Token 直接送信の fetch
        },
      },
    },
  },
});

// packages/frontend/app/custom-fetch.ts
export const customFetch = async <T>(
  url: string, options: CustomFetchOptions
): Promise<T> => {
  // AWS SigV4 で署名
  const signedHeaders = await getSignedHeaders(url, options.method, options.body);
  // Cognito JWT を追加
  const cognitoJwt = await getCognitoUserPoolJwtToken();
  if (cognitoJwt) signedHeaders["X-Cognito-Jwt"] = cognitoJwt;

  const response = await fetch(url, {
    ...options, headers: { ...options.headers, ...signedHeaders },
  });
  if (!response.ok) throw { message: response.statusText, status: response.status };
  return getBody<T>(response);
};

// packages/mobile/src/clients/api-client/custom-fetch.ts
export const customFetch = async <T>(
  url: string, options: RequestInit = {}
): Promise<T> => {
  const headers = new Headers(options.headers);
  headers.set("Content-Type", "application/json");

  // 認証サービスから ID Token を取得
  const idToken = await authService.getCurrentToken();
  if (idToken) headers.set("X-Id-Token", idToken);

  let response = await fetch(url, { ...options, headers });

  // 401 → トークンリフレッシュ → リトライ（1回のみ）
  if (response.status === 401) {
    const refreshed = await authService.refreshToken();
    if (refreshed) {
      headers.set("X-Id-Token", await authService.getCurrentToken());
      response = await fetch(url, { ...options, headers });
    }
  }
  if (!response.ok) throw new Error(await response.text());
  return await response.json();
};

// app/api-client/user/user.ts
export const useGetUser = (userId: string) => {
  return useSWR(
    getGetUserKey(userId),
    () => customFetch<GetUserResponse>(`/users/${userId}`, { method: 'GET' })
  );
};

// src/clients/api-client/generated/user/user.ts
export const getUser = (userId: string) => {
  return customFetch<GetUserResponse>(`/users/${userId}`, { method: 'GET' });
};

// Mobile 側で自前の hooks を書く
const { data } = useQuery({
  queryKey: ['user', userId],
  queryFn: () => getUser(userId),
});

app/api-client/
├── user/
│   ├── user.ts         # SWR hooks（Web）/ fetch関数（Mobile）
│   ├── user.zod.ts     # Zod バリデーションスキーマ
│   └── user.msw.ts     # MSW モックハンドラ（Web dev用）

// SWR: Optimistic Update を自前で書く
const { trigger } = useSWRMutation('/api/todos', updateTodo, {
  optimisticData(current) {
    // スナップショット保存 + 楽観更新を手動で
    return current.map(t => t.id === id ? { ...t, done: true } : t);
  },
  rollbackOnError: true,
  // revalidate でサーバーと同期
  revalidate: true,
  // ← 関連する他のキャッシュは? 手動で mutate() を呼ぶ必要あり
});

// TanStack Query: ライフサイクルフックで宣言的
const mutation = useMutation({
  mutationFn: updateTodo,
  async onMutate(newTodo) {
    await queryClient.cancelQueries({ queryKey: ['todos'] });
    const previous = queryClient.getQueryData(['todos']);
    queryClient.setQueryData(['todos'], old =>
      old.map(t => t.id === newTodo.id ? { ...t, ...newTodo } : t)
    );
    return { previous }; // ← ロールバック用
  },
  onError(err, vars, context) {
    queryClient.setQueryData(['todos'], context.previous); // 自動ロールバック
  },
  onSettled() {
    queryClient.invalidateQueries({ queryKey: ['todos'] }); // 関連キャッシュも一括
  },
});

// SWR: 関連キャッシュを手動で列挙
await mutate('/api/users/123');
await mutate('/api/users');           // ← 一覧も忘れずに
await mutate('/api/users/123/posts'); // ← これ忘れがち
await mutate('/api/teams/456');       // ← チーム情報にユーザー名が...
// → エンドポイントが増えるたびに追加漏れのリスク

// TanStack Query: パターンマッチで一括無効化
queryClient.invalidateQueries({
  predicate: (query) =>
    query.queryKey[0] === 'users' ||
    (query.queryKey[0] === 'teams' && query.state.data?.members?.includes(userId))
});

// loader でデータを取得
export async function loader() {
  const user = await getUser(userId); // サーバーサイドで取得
  return { user };
}

// コンポーネントで SWR を使うと...
function UserPage() {
  const { user: initialUser } = useLoaderData();
  const { data: user } = useSWR('/api/users/123', fetcher, {
    fallbackData: initialUser, // ← loader のデータを初期値に
  });
  // → loader のキャッシュと SWR のキャッシュが別物。同期が面倒。
}

// loader で prefetch → コンポーネントと同じキャッシュ
export async function loader() {
  await queryClient.ensureQueryData({
    queryKey: ['user', userId],
    queryFn: () => getUser(userId),
  });
  return null; // データはキャッシュ経由で渡る
}

function UserPage() {
  const { data: user } = useQuery({
    queryKey: ['user', userId],
    queryFn: () => getUser(userId),
  });
  // → loader と同じキャッシュ。初回はサーバー取得、以降はクライアントキャッシュ。
}

export const useGetMe = () => {
  const { isAuthenticated } = useAuthContext();
  const url = isAuthenticated
    ? `${resourceApiBaseUrl}/me`
    : null;  // ← null キーで fetch を抑制

  return useSWR<GetMeResponse>(
    url,
    async (fetchUrl: string) => {
      const idToken = await getOrRefreshIdToken();
      const signedHeaders = await getSignedHeaders({
        url: fetchUrl, method: "GET",
        requestBody: "", idToken,
      });

      const response = await fetch(fetchUrl, {
        method: "GET", headers: signedHeaders,
      });
      if (!response.ok) throw new Error(`${response.status}`);
      return await response.json();
    },
  );
};

export const useGetMe = () => {
  const { isAuthenticated } = useAuthContext();

  return useQuery({
    queryKey: ['me'],
    queryFn: async () => {
      const idToken = await getOrRefreshIdToken();
      const signedHeaders = await getSignedHeaders({
        url: `${resourceApiBaseUrl}/me`, method: "GET",
        requestBody: "", idToken,
      });

      const response = await fetch(`${resourceApiBaseUrl}/me`, {
        method: "GET", headers: signedHeaders,
      });
      if (!response.ok) throw new Error(`${response.status}`);
      return await response.json();
    },
    enabled: isAuthenticated,  // ← 宣言的に fetch を制御
  });
};

// hooks とは別に、素の async 関数として定義
export const recordViewActivity = async (
  serviceId: string, contentId: string
): Promise<boolean> => {
  const idToken = await getOrRefreshIdToken();
  if (!idToken) return false;

  const url = `${baseUrl}/services/${serviceId}/membership-contents/${contentId}/activities`;
  const body = JSON.stringify({ type: "view" });
  const signedHeaders = await getSignedHeaders({ url, method: "POST", requestBody: body, idToken });

  const response = await fetch(url, {
    method: "POST",
    headers: { ...signedHeaders, "Content-Type": "application/json" },
    body,
  });
  return response.ok;
};

// コンポーネント側: SWR のキャッシュ更新は手動
const { mutate } = useMembershipActivities(serviceId);

const handleView = async () => {
  await recordViewActivity(serviceId, contentId);
  mutate();  // ← 手動で再検証。関連キャッシュは?
};

export const useRecordViewActivity = () => {
  const queryClient = useQueryClient();

  return useMutation({
    mutationFn: async ({ serviceId, contentId }: Params) => {
      const idToken = await getOrRefreshIdToken();
      const url = `${baseUrl}/services/${serviceId}/membership-contents/${contentId}/activities`;
      const body = JSON.stringify({ type: "view" });
      const signedHeaders = await getSignedHeaders({ url, method: "POST", requestBody: body, idToken });

      const response = await fetch(url, {
        method: "POST",
        headers: { ...signedHeaders, "Content-Type": "application/json" },
        body,
      });
      if (!response.ok) throw new Error(`${response.status}`);
    },
    onSuccess(_, { serviceId }) {
      // 関連キャッシュを一括無効化
      queryClient.invalidateQueries({
        queryKey: ['membership-activities', serviceId],
      });
      queryClient.invalidateQueries({
        queryKey: ['membership-contents', serviceId],
      });
    },
  });
};

// コンポーネント側: mutation の状態もフックで管理
const { mutate, isPending } = useRecordViewActivity();
const handleView = () => mutate({ serviceId, contentId });

// 一覧取得
export const useLessons = () =>
  useQuery({ queryKey: ['lessons'], queryFn: () => getLessons() });

// 作成
export const useCreateLesson = () => {
  const qc = useQueryClient();
  return useMutation({
    mutationFn: createLesson,
    onSuccess: () => qc.invalidateQueries({ queryKey: ['lessons'] }),
  });
};

// 更新（詳細キャッシュも無効化）
export const useUpdateLesson = () => {
  const qc = useQueryClient();
  return useMutation({
    mutationFn: ({ id, data }: { id: string; data: Partial<Lesson> }) =>
      updateLesson(id, data),
    onSuccess: (_, { id }) => {
      qc.invalidateQueries({ queryKey: ['lessons'] });
      qc.invalidateQueries({ queryKey: ['lesson', id] });
    },
  });
};

// 削除
export const useDeleteLesson = () => {
  const qc = useQueryClient();
  return useMutation({
    mutationFn: deleteLesson,
    onSuccess: () => qc.invalidateQueries({ queryKey: ['lessons'] }),
  });
};

const queryClient = new QueryClient({
  defaultOptions: {
    queries: { retry: 1, refetchOnWindowFocus: false },
  },
});

export const AppProvider = ({ children }) => (
  <QueryClientProvider client={queryClient}>
    <SWRConfig value={globalSWROptions}>
      <AuthProvider>
        {children}
      </AuthProvider>
    </SWRConfig>
  </QueryClientProvider>
);