여러 데이터 기능과 타입스크립트 타입저장

타입스크립트 불러와서 사용하여 유지보수의 편의성 증대

// 각 테이블 전체 타입 정한 후
export type Json = string | Date | number | boolean | null | { [key: string]: Json | undefined } | Json[];
export interface Typedata {
  public: {
    Tables: {
      posts: {
        Row: {
          // create,select
          id: string;
          user_id: string;
          like_count: number;
          comments_count: number;
          content: string;
          image: string;
          title: string;
          category: string;
        };
        Insert: {
          id: string;
          user_id?: string;
          category: string;
          title: string;
          image?: string;
          content: string;
          like_count: number;
          comments_count: number;
        };
        Update: {
          id: string;
          user_id?: string;
          category: string;
          title: string;
          image?: string;
          content: string;
          like_count: number;
          comments_count: number;
        };
        Controll: {
          id: string;
          user_id: string;
          category: string;
          title: string;
          image: string;
          content: string;
          like_count: number;
          comments_count: number;
        };
      };
      comments: {
        Row: {
          id: string;
          comment_id: number;
          comments: string;
          parent_comment: string;
          created_at: Date;
        };
        Insert: {
          id: string;
          comment_id: number;
          comments: string;
          parent_comment: string;
          created_at: Date;
        };
        Update: {
          id: string;
          comment_id: number;
          comments: string;
          parent_comment: string;
          created_at: Date;
        };
        Controll: {
          id: string;
          comment_id: number;
          comments: string;
          parent_comment: string;
          created_at: Date;
        };
      };
      userinfo: {
        Row: {
          id: string;
          username: string;
          avatar_url: string;
        };
      };
    };
  };
}

=> 사용하는 타입을 따로 저장하여 불러와서 사용한다.
이 위치에는 supabase에서 불러오는 테이블과 컬럼을 따로 저장하여 코드의 가독성과 타입정리를 위해 사용한다.

불러오는 방법

import { Typedata } from 'shared/supabase.type';
import { QUERY_KEYS } from 'query/keys';

interface PostType {
  data: Typedata['public']['Tables']['posts']['Row'];
}
  const [post, setPost] = useState<PostType[]>([]);
  
  const { isLoading: postsLoading, data: postsData = [] } = useQuery({
    queryKey: [QUERY_KEYS.POSTS],
    queryFn: getPosts
  });
  
    if (postsLoading) {
    return <p>로딩 중 </p>;
  } else {
    console.log('데이터 정보 확인');
  }
  <--- 생략 -->

=> 타입스크립트 코드가 길어지긴 코드 작성 스타일이 import 해서 가져와서 사용하는걸 좋아하는 편이라 컴포넌트 하나하나 따로 관리 하지 않는다.
이 방법이 유지보수에도 도움이 된다고 생각한다.