fix: resolve Supabase UUID from clerk_id before all snippet and review queries

Author: prithaxdev

apps/web/hooks/use-review.ts

@@ -1,18 +1,18 @@
 "use client"
 
 import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query"
-import { useAuth } from "@clerk/nextjs"
 import { createClient } from "@/lib/supabase/client"
 import { api } from "@/lib/api"
 import { snippetKeys } from "@/hooks/use-snippets"
+import { useSupabaseUserId } from "@/hooks/use-user"
 import type { ReviewLog, ReviewLogInsert } from "@/types/snippet"
 
 export const reviewKeys = {
   logs: (userId: string) => ["review-logs", userId] as const,
 }
 
 export function useReviewLogs() {
-  const { userId } = useAuth()
+  const { data: userId } = useSupabaseUserId()
   const supabase = createClient()
 
   return useQuery({
@@ -33,7 +33,7 @@ export function useReviewLogs() {
 }
 
 export function useSubmitReview() {
-  const { userId } = useAuth()
+  const { data: userId } = useSupabaseUserId()
   const queryClient = useQueryClient()
   const supabase = createClient()
 
@@ -51,7 +51,8 @@ export function useSubmitReview() {
       currentInterval: number
       currentReps: number
     }): Promise<void> => {
-      // Call SM-2 algorithm via FastAPI
+      if (!userId) throw new Error("User not ready")
+
       const schedule = await api.review.schedule({
         snippet_id: snippetId,
         rating,
@@ -60,7 +61,6 @@ export function useSubmitReview() {
         current_reps: currentReps,
       })
 
-      // Update snippet SM-2 state in Supabase
       const { error: snippetError } = await supabase
         .from("snippets")
         .update({
@@ -74,10 +74,9 @@ export function useSubmitReview() {
 
       if (snippetError) throw snippetError
 
-      // Log the review event
       const log: ReviewLogInsert = {
         snippet_id: snippetId,
-        user_id: userId!,
+        user_id: userId,
         rating,
         ease_factor_after: schedule.ease_factor,
         interval_after: schedule.interval_days,

apps/web/hooks/use-snippets.ts

@@ -1,8 +1,8 @@
 "use client"
 
 import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query"
-import { useAuth } from "@clerk/nextjs"
 import { createClient } from "@/lib/supabase/client"
+import { useSupabaseUserId } from "@/hooks/use-user"
 import type { Snippet, SnippetInsert, SnippetUpdate } from "@/types/snippet"
 
 export const snippetKeys = {
@@ -12,7 +12,7 @@ export const snippetKeys = {
 }
 
 export function useSnippets() {
-  const { userId } = useAuth()
+  const { data: userId } = useSupabaseUserId()
   const supabase = createClient()
 
   return useQuery({
@@ -32,7 +32,7 @@ export function useSnippets() {
 }
 
 export function useDueSnippets() {
-  const { userId } = useAuth()
+  const { data: userId } = useSupabaseUserId()
   const supabase = createClient()
   const today = new Date().toISOString().split("T")[0]
 
@@ -73,15 +73,17 @@ export function useSnippet(id: string) {
 }
 
 export function useCreateSnippet() {
-  const { userId } = useAuth()
+  const { data: userId } = useSupabaseUserId()
   const queryClient = useQueryClient()
   const supabase = createClient()
 
   return useMutation({
     mutationFn: async (input: Omit<SnippetInsert, "user_id">): Promise<Snippet> => {
+      if (!userId) throw new Error("User not ready")
+
       const { data, error } = await supabase
         .from("snippets")
-        .insert({ ...input, user_id: userId! })
+        .insert({ ...input, user_id: userId })
         .select()
         .single()
 
@@ -96,7 +98,7 @@ export function useCreateSnippet() {
 }
 
 export function useUpdateSnippet() {
-  const { userId } = useAuth()
+  const { data: userId } = useSupabaseUserId()
   const queryClient = useQueryClient()
   const supabase = createClient()
 
@@ -121,7 +123,7 @@ export function useUpdateSnippet() {
 }
 
 export function useDeleteSnippet() {
-  const { userId } = useAuth()
+  const { data: userId } = useSupabaseUserId()
   const queryClient = useQueryClient()
   const supabase = createClient()
 

apps/web/hooks/use-user.ts

@@ -0,0 +1,28 @@
+"use client"
+
+import { useQuery } from "@tanstack/react-query"
+import { useAuth } from "@clerk/nextjs"
+import { createClient } from "@/lib/supabase/client"
+
+/** Resolves the internal Supabase UUID for the current Clerk user.
+ *  Cached with staleTime: Infinity — the UUID never changes. */
+export function useSupabaseUserId() {
+  const { userId: clerkId } = useAuth()
+  const supabase = createClient()
+
+  return useQuery({
+    queryKey: ["supabase-user-id", clerkId],
+    enabled: !!clerkId,
+    staleTime: Infinity,
+    queryFn: async (): Promise<string> => {
+      const { data, error } = await supabase
+        .from("users")
+        .select("id")
+        .eq("clerk_id", clerkId!)
+        .single()
+
+      if (error) throw error
+      return data.id
+    },
+  })
+}