Supabase

supabase gen types typescript --project-id abcdefghijklmnopqrst > database.types.ts

import { createClient } from "@/utils/supabase/server";
import RealtimePosts from "./Realtime";
 
export default async function Notes() {
  const supabase = createClient();
  const { data: notes, error } = await supabase.from("countries").select();
 
  if (!notes || error) {
    return null;
  }
 
  return <RealtimePosts serverPosts={notes} />;
}

"use client";
 
import { Database } from "@/database.types";
import supabase from "@/utils/supabase/client";
import { useEffect, useState } from "react";
 
export default function RealtimePosts({
  serverPosts,
}: {
  serverPosts: Database["public"]["Tables"]["countries"]["Insert"][];
}) {
  const [posts, setPosts] = useState(serverPosts);
 
  useEffect(() => {
    const channel = supabase
      .channel("countries")
      .on(
        "postgres_changes",
        { event: "*", schema: "public", table: "countries" },
        (payload) => {
          if (payload.eventType === "DELETE") {
            setPosts((posts) =>
              posts.filter((data) => data.id !== payload.old.id)
            );
          } else if (payload.eventType === "INSERT") {
            setPosts((posts) => [...posts, payload.new]);
          } else if (payload.eventType === "UPDATE") {
            setPosts((posts) =>
              posts.map((post) => {
                if (post.id === payload.old.id) {
                  return { ...post, ...payload.new };
                } else {
                  return post;
                }
              })
            );
          }
 
          console.log(payload);
        }
      )
      .subscribe();
 
    return () => {
      supabase.removeChannel(channel);
    };
  }, [serverPosts]);
 
  console.log(posts);
 
  return <pre>{JSON.stringify(posts, null, 2)}</pre>;
}