Optimistic Update

更新操作のパターン

export function useUpdateEntity() {
  const utils = api.useUtils();

  return api.entity.update.useMutation({
    onMutate: async ({ id, data }) => {
      await utils.entity.list.cancel();
      await utils.entity.getById.cancel({ id });

      const previousList = utils.entity.list.getData();
      const previousItem = utils.entity.getById.getData({ id });

      // リストキャッシュを更新
      utils.entity.list.setData(undefined, (old) => {
        if (!old) return old;
        return old.map((item) =>
          item.id === id ? { ...item, ...data, updated_at: new Date().toISOString() } : item,
        );
      });

      // 個別キャッシュも更新
      utils.entity.getById.setData({ id }, (old) => {
        if (!old) return old;
        return { ...old, ...data, updated_at: new Date().toISOString() };
      });

      return { previousList, previousItem };
    },

    onError: (_err, { id }, context) => {
      if (context?.previousList) {
        utils.entity.list.setData(undefined, context.previousList);
      }
      if (context?.previousItem) {
        utils.entity.getById.setData({ id }, context.previousItem);
      }
    },

    onSettled: (_data, _err, { id }) => {
      void utils.entity.list.invalidate();
      void utils.entity.getById.invalidate({ id });
    },
  });
}

削除操作のパターン

export function useDeleteEntity() {
  const utils = api.useUtils();

  return api.entity.delete.useMutation({
    onMutate: async ({ id }) => {
      await utils.entity.list.cancel();

      const previous = utils.entity.list.getData();

      // リストから即座に削除
      utils.entity.list.setData(undefined, (old) => {
        if (!old) return old;
        return old.filter((item) => item.id !== id);
      });

      return { previous };
    },

    onError: (_err, _input, context) => {
      if (context?.previous) {
        utils.entity.list.setData(undefined, context.previous);
      }
    },

    onSettled: () => {
      void utils.entity.list.invalidate();
    },
  });
}

Realtime競合対策

Supabase Realtimeと楽観的更新を併用する場合、競合を防ぐためにフラグを使用する。

// stores/useEntityCacheStore.ts
import { create } from 'zustand';

interface EntityCacheStore {
  isMutating: boolean;
  setMutating: (value: boolean) => void;
}

export const useEntityCacheStore = create<EntityCacheStore>((set) => ({
  isMutating: false,
  setMutating: (value) => set({ isMutating: value }),
}));

// hooks/useEntityRealtime.ts
export function useEntityRealtime() {
  const utils = api.useUtils();
  const isMutating = useEntityCacheStore((s) => s.isMutating);

  useEffect(() => {
    const channel = supabase
      .channel('entities')
      .on('postgres_changes', { event: '*', schema: 'public', table: 'entities' }, () => {
        // mutation中はRealtimeによるキャッシュ更新をスキップ
        if (!isMutating) {
          void utils.entity.list.invalidate();
        }
      })
      .subscribe();

    return () => {
      void supabase.removeChannel(channel);
    };
  }, [isMutating, utils]);
}

// mutationでフラグを管理
export function useCreateEntity() {
  const utils = api.useUtils();
  const setMutating = useEntityCacheStore((s) => s.setMutating);

  return api.entity.create.useMutation({
    onMutate: async (input) => {
      setMutating(true); // mutation開始
      // ... 楽観的更新
    },

    onSettled: () => {
      setMutating(false); // mutation完了
      void utils.entity.list.invalidate();
    },
  });
}

楽観的更新が不要な場合

以下のケースでは楽観的更新を適用しない：

1. 不可逆操作: アカウント削除、支払い処理など

   • 確認ダイアログを表示し、完了を待つ

2. サーバー計算が必要: IDの発行、複雑な集計など

   • ただし一時IDで対応可能な場合は実装する

3. 低頻度操作: 月1回程度の設定変更など

   • ただし一貫性のため実装を推奨

チェックリスト

新規mutation作成時：

• ユーザー操作に対応するか？ → 楽観的更新を実装
• 不可逆操作か？ → 楽観的更新なし、確認ダイアログを表示
• 複数キャッシュに影響するか？ → 全キャッシュを更新
• Realtimeと併用するか？ → isMutatingフラグで競合防止

実装時：

• onMutateでキャッシュをスナップショット
• onErrorでロールバック
• onSettledで再検証（invalidate）
• 関連する全キャッシュを更新（list + getById）

既存実装参考

src/features/tags/hooks/
├── useTagCrudMutations.ts   # CRUD楽観的更新（作成・更新・削除を統合）
├── useTagMergeMutation.ts   # マージ操作の楽観的更新
├── useTagsOptimistic.ts     # キャッシュ操作ヘルパー
└── useTagOperations.ts      # 高レベル操作（UI連携）

関連スキル

• /store-creating - Zustandストア作成
• /trpc-router-creating - tRPCルーター作成