trpc_react_query_supabase_realtime_provider.tsx

import { supabase } from "@/lib/supabase";
import { useAuth } from "@/services/auth/useAuth";
import { useEffect } from "react";
import { trpc } from "@/utils/trpc";

export function useRealtime() {
  // your auth setup to get current user id
  const { session } = useAuth();
  const userId = session?.user.id;
  
  const utils = trpc.useUtils();

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

    const channel = supabase
      .channel("done-capsules")
      .on(
        "postgres_changes",
        {
          event: "*",
          schema: "public",
          table: "table_name",
          filter: `user_id=eq.${userId}`,
        },
        (payload) => {
          // Invalidate the getTranscript query for the updated transcript
          console.log("-> realtime triggered");
          
          // this is a sample replace `myQuery` with your own
          utils.myQuery.invalidate();
        },
      )
      .subscribe();

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

export default function RealtimeProvider({
  children,
}: {
  children: React.ReactNode;
}) {
    useRealtime();
  return <>{children}</>;
}