Supabase CLI에서 코드 또는 타입을 자동 생성하는 명령어.
gen에 대해서 알아보자.
Generating TypeScript Types
자세한 설명은 위 공식문서에 잘 나와있다.
오늘 이 친구를 처음 접하고, 다시 복기할 겸 적어보는 오늘의 TIL.
그게 뭔데
공식 문서 기반으로 정리해 보겠다.
Supabase API는 데이터베이스에서 생성되므로 데이터베이스 introspection을 사용하여 type-safe한 API 정의를 생성할 수 있습니다.
공식문서 제일 첫 줄에 나온 말인데... Introspection이 뭔가 싶어 찾아보니 GraphQL이 나오는데, 감으로는 API 스키마의 세부사항과 관련한 것 같다.
무튼 gen 을 이용하면 좋은 것.
- Generating types from project dashboard
프로젝트 대시보드에 만들어진 테이블들을 기반으로 typescript 타입을 생성하고 다운받을 수 있음!
어떻게 쓰는데
CLI(command line interface)를 이용한 타입 생성 방법을 알려주고 있다.
이 부분에서 이제 내 프로젝트 id를 가져와 넣어주면 되겠다.
--schema public > database.types.ts 이 코드에 따라 public 스키마에 있는 내용이 database.types.ts 파일에 저장된다. 만일 types 폴더 경로에 저장하고 싶다면, types/database.types.ts 이런 식으로 수정 가능.
최종적으로 얻어지는 Database 타입의 구조. 내 public 스키마를 통째로 뜯어다 주니 얼마나 편한지 모르겠다.
팁
supabase gen types typescript --project-id "$PROJECT_REF" --schema public > database.types.ts 이 명령어는 package.json에 script로 저장할 수 있는데,
next project에서 명령어 세팅하여 pnpm/yarn gen:types 이런 방식으로도 업데이트 할 수 있다.
- 타입 업데이트는 깃헙액션으로도 만들 수 있다고..!
사용하기
타입 정의를 어떻게 쓰나요?
세팅을 했으면 써야지, 세팅은 우리 프로젝트에도 되어있으니 난 이제 쓰기만 하면 된다.
문제는 지금 시간이 열두시가 넘었고 내 정신이 혼미하다는 거지.
import { createClient } from '@supabase/supabase-js'
import { Database } from './database.types'
const supabase = createClient<Database>(process.env.SUPABASE_URL, process.env.SUPABASE_ANON_KEY)바로 이렇게 createClient를 선언하는 곳에서 Database 자체를 제네릭을 활용해 타입선언이 가능하다.
기존에는 Before와 같이 선언하던 타입을, 이젠 Tables<'테이블명'>과 같이 간단하게 작성해도 가능.
