Rork に Convex を組み合わせて型安全なリアクティブバックエンドを作る

// convex/schema.ts
import { defineSchema, defineTable } from "convex/server";
import { v } from "convex/values";
 
export default defineSchema({
  wallpapers: defineTable({
    title: v.string(),
    category: v.string(),
    imageStorageId: v.id("_storage"),
    // 公開 URL は都度生成するので保存しない
    createdAt: v.number(),
  }).index("by_category", ["category"]),
 
  favorites: defineTable({
    userId: v.string(), // Clerk の subject をそのまま使う
    wallpaperId: v.id("wallpapers"),
    savedAt: v.number(),
  })
    .index("by_user", ["userId"])
    .index("by_user_wallpaper", ["userId", "wallpaperId"]),
});

// convex/favorites.ts
import { query, mutation } from "./_generated/server";
import { v } from "convex/values";
 
export const list = query({
  args: { userId: v.string() },
  handler: async (ctx, { userId }) => {
    const favorites = await ctx.db
      .query("favorites")
      .withIndex("by_user", (q) => q.eq("userId", userId))
      .order("desc")
      .collect();
 
    // お気に入りに紐づく壁紙を一緒に返す
    return Promise.all(
      favorites.map(async (f) => ({
        ...f,
        wallpaper: await ctx.db.get(f.wallpaperId),
      }))
    );
  },
});
 
export const toggle = mutation({
  args: {
    userId: v.string(),
    wallpaperId: v.id("wallpapers"),
  },
  handler: async (ctx, { userId, wallpaperId }) => {
    const existing = await ctx.db
      .query("favorites")
      .withIndex("by_user_wallpaper", (q) =>
        q.eq("userId", userId).eq("wallpaperId", wallpaperId)
      )
      .unique();
 
    if (existing) {
      await ctx.db.delete(existing._id);
      return { state: "removed" as const };
    }
    const id = await ctx.db.insert("favorites", {
      userId,
      wallpaperId,
      savedAt: Date.now(),
    });
    return { state: "added" as const, id };
  },
});

// app/(tabs)/favorites.tsx（抜粋）
import { useQuery, useMutation } from "convex/react";
import { api } from "@/convex/_generated/api";
import { useUser } from "@clerk/clerk-expo";
 
export default function FavoritesScreen() {
  const { user } = useUser();
  const userId = user?.id ?? "guest";
 
  // データが更新されると自動で再レンダリングされます
  const favorites = useQuery(api.favorites.list, { userId });
 
  const toggle = useMutation(api.favorites.toggle).withOptimisticUpdate(
    (localStore, args) => {
      // 楽観的更新：通信待ちでも UI は即座に変わる
      const current = localStore.getQuery(api.favorites.list, {
        userId: args.userId,
      });
      if (!current) return;
      const existingIndex = current.findIndex(
        (f) => f.wallpaperId === args.wallpaperId
      );
      if (existingIndex >= 0) {
        localStore.setQuery(
          api.favorites.list,
          { userId: args.userId },
          current.filter((_, i) => i !== existingIndex)
        );
      }
    }
  );
 
  if (favorites === undefined) {
    return <LoadingView />;
  }
  // ... 以降は生成された UI と同じ
}

// convex/uploads.ts
import { mutation } from "./_generated/server";
import { v } from "convex/values";
 
// アップロード URL を発行（10分間有効）
export const generateUploadUrl = mutation({
  handler: async (ctx) => {
    return await ctx.storage.generateUploadUrl();
  },
});
 
// 画像メタデータを保存
export const saveUploadedWallpaper = mutation({
  args: {
    storageId: v.id("_storage"),
    title: v.string(),
    category: v.string(),
  },
  handler: async (ctx, args) => {
    return await ctx.db.insert("wallpapers", {
      title: args.title,
      category: args.category,
      imageStorageId: args.storageId,
      createdAt: Date.now(),
    });
  },
});

// hooks/useWallpaperUpload.ts
import * as ImagePicker from "expo-image-picker";
import { useMutation } from "convex/react";
import { api } from "@/convex/_generated/api";
 
export function useWallpaperUpload() {
  const generateUploadUrl = useMutation(api.uploads.generateUploadUrl);
  const saveWallpaper = useMutation(api.uploads.saveUploadedWallpaper);
 
  const upload = async (category: string) => {
    const result = await ImagePicker.launchImageLibraryAsync({
      mediaTypes: ImagePicker.MediaTypeOptions.Images,
      quality: 0.9,
    });
    if (result.canceled) return null;
 
    const asset = result.assets[0];
    const uploadUrl = await generateUploadUrl();
 
    // 署名付き URL に直接 PUT
    const response = await fetch(uploadUrl, {
      method: "POST",
      headers: { "Content-Type": asset.mimeType ?? "image/jpeg" },
      body: await (await fetch(asset.uri)).blob(),
    });
    const { storageId } = await response.json();
 
    // メタデータを保存
    return await saveWallpaper({
      storageId,
      title: asset.fileName ?? "untitled",
      category,
    });
  };
 
  return { upload };
}

// convex/auth.config.ts
export default {
  providers: [
    {
      domain: "https://your-clerk-instance.clerk.accounts.dev", // Clerk の Frontend API URL
      applicationID: "convex",
    },
  ],
};

// convex/favorites.ts の toggle を認証済みに置き換える
export const toggleSecure = mutation({
  args: { wallpaperId: v.id("wallpapers") },
  handler: async (ctx, { wallpaperId }) => {
    const identity = await ctx.auth.getUserIdentity();
    if (!identity) throw new Error("ログインが必要です");
    // identity.subject が Clerk のユーザー ID
    // ...以降は先ほどと同じロジック
  },
});

// convex/crons.ts
import { cronJobs } from "convex/server";
import { internal } from "./_generated/api";
 
const crons = cronJobs();
crons.daily(
  "daily-wallpaper-pickup",
  { hourUTC: 17, minuteUTC: 0 }, // JST 2:00
  internal.pickup.recalculate
);
export default crons;

// convex/pickup.ts
import { internalMutation } from "./_generated/server";
 
export const recalculate = internalMutation({
  handler: async (ctx) => {
    const wallpapers = await ctx.db.query("wallpapers").collect();
    for (const w of wallpapers) {
      const count = (
        await ctx.db
          .query("favorites")
          .withIndex("by_user_wallpaper", (q) =>
            q.eq("userId", "*" as any).eq("wallpaperId", w._id) // 全ユーザー分
          )
          .collect()
      ).length;
      // スコアを別テーブルに書き出すなど
      console.log(`[pickup] ${w.title}: ${count} favorites`);
    }
  },
});

// convex/lib/errors.ts
import { ConvexError } from "convex/values";
 
export function requireAuth(identity: { subject?: string } | null) {
  if (!identity?.subject) {
    throw new ConvexError({
      code: "UNAUTHENTICATED",
      message: "ログインが必要です",
    });
  }
  return identity.subject;
}
 
export function requireOwnership<T extends { userId: string }>(
  doc: T | null,
  userId: string
) {
  if (!doc) throw new ConvexError({ code: "NOT_FOUND", message: "見つかりません" });
  if (doc.userId !== userId)
    throw new ConvexError({ code: "FORBIDDEN", message: "権限がありません" });
  return doc;
}