[Final Project] 수파베이스 데이터 json 일 경우 타입 지정

문제점

수파베이스에서 json 타입 형식을 가져와서 사용할 때 기존에 따로 사용하고 있는 타입으로 지정할 경우

이런 오류가 떴었다.

Type 'string | number | true | { [key: string]: Json | undefined; } | Json[]' is not assignable to type 'MessageWithSaveButton[]'.

Type 'string' is not assignable to type 'MessageWithSaveButton[]'.

해결 방법

json형식과 MessageWithSaveButton[] 타입이 맞지 않아 생기는 오류였고, 수파베이스에서 Json 타입을 import해서 타입 단언을 해주니 문제가 해결됐다.

let messages = (data[0]?.messages as Json[]) || [];

supabase.ts 파일에서 확인할 수 있는 JSON 타입

// supabase.ts
export type Json =
  | string
  | number
  | boolean
  | null
  | { [key: string]: Json | undefined }
  | Json[]

import { Json } from "@/types/supabase";

export const GET = async (request: NextRequest, { params }: { params: { id: string } }) => {
  const supabase = createClient();

  const { id: sessionId } = params;

  try {
    const { data, error } = await supabase
      .from(CHAT_SESSIONS)
      .select("messages")
      .eq("session_id", sessionId)
      .eq("ai_type", "assistant")
      .order("created_at", { ascending: true });

    if (error) {
      console.error(error);
      return NextResponse.json({ error: error.message }, { status: 500 });
    }

    let messages = (data[0]?.messages as Json[]) || [];

    if (messages.length === 0) {
      const welcomeMessage: MessageWithSaveButton = {
        role: "assistant",
        content: "안녕하세요, 저는 당신의 AI 비서 PAi입니다. 필요하신 게 있다면 저에게 말씀해주세요.",
        created_at: new Date().toISOString(),
        showSaveButton: false
      };

      // 웰컴 메시지를 데이터베이스에 저장
      await supabase
        .from(CHAT_SESSIONS)
        .update({ messages: [welcomeMessage] })
        .eq("session_id", sessionId)
        .eq("ai_type", "assistant");

      return NextResponse.json({
        message: [{ ...welcomeMessage }].filter(Boolean)
      });
    }

    console.log("data", data);

    return NextResponse.json({ message: messages });
  } catch (error) {
    console.error("Error : ", error);
    return NextResponse.json({ error: "Internal Server Error" }, { status: 500 });
  }
};