supabase - Typescript 파일 생성

supabase 사용 중 각 api 요청의 결과에 대한 return 타입이 필요한 경우가 생겼다. 해당 data에서 필요한 값에 대해서만 interface 등으로 지정해서 타입을 줄 수도 있으나 만약 그런 data들이 여러 컴포넌트에서 사용된다면 굉장히 복잡해질 것 같았다.

Docs를 찾아보니 자체적으로 추론되는 Typescript 를 지원하고 있었다. 그래서 문서 설명에 따라 Typescript를 생성하고, 사용하는 방식에 대해 글로 남겨보고자 한다.

Supabase Genrating Typescript

yarn add supabase --save-dev

• 우선 dev 종속으로 supabase cli를 설치해 준다.
  
  

npx supabase gen types typescript --project-id [내 project-id] > database.types.ts

• 이후 위와 같이 project id 를 입력해주면 되는데 본인의 경우 cli를 로컬환경에 설치하였기에 터미널에서 supabase 명령어를 인식하지 못한다.
  그래서 로컬환경에서 해당 명령어를 인지할 수 있도록 npx를 앞에 붙여 사용했다.

문제 1 - accessToken 에러

• 다만 처음 저 명령어로 실행하면 accessToken이 not provided 하다는 에러가 발생한다. 이는 타입스크립트 자동 생성 시 project-id를 통해 내 프로젝트와 연동을 하게 되는데 이 과정에서 인증받은 사용자임을 accessToken으로 식별하기 때문인 것으로 보인다.
  
  
  

• 해결책은 간단하다. supabase 프로젝트 내의 accessToken 대시보드에서 토큰을 추가해주면 된다.

• 이후 다시 명령어를 실행하면 제대로 지정된 경로에 type파일이 자동 추론되어 생성된다.
  *만약 여전히 인증되지 않았다는 경고문이 뜰 경우 npx supabase login 으로 직접 로그인해주면 문제를 해결할 수 있다.

문제 2 - .env 에서 project-id 가져오기

나는 추가적으로 script에 로그인 명령어, type 생성 명령어를 추가하여 간단하게 지정한 명령어로 실행가능하도록 하고자 했다.
(supabase의 데이터베이스 구조가 바뀌게 되면 그때마다 type 다시 생성해줘야 하는데 그때마다 긴 명령어를 입력하는 게 귀찮았기 때문)

• 우선 env 파일 안에 환경변수값을 지정해주었다.

• 이후 script에 위와 같이 추가해준다.

• 여기서 핵심은 앞서 env의 환경변수 값을 project-id로 사용하기 위해 위와같이 변수로 설정해준다는 것이다.

• 저렇게 script에서 환경변수를 추가하여 실행하는 로직이 되려면 .env에서 값을 가져와야 하는데 그냥은 안되고, 해당 기능을 지원하는 도구를 사용해야 한다.

• dotenv-cli 는 cli 명령 실행 시 우선 지정한 .env 에 접근한다. 이후 나머지 명령어를 실행하고 명령어 중 환경변수가 사용되는 부분을 앞서 접근한 env에서 추출하기 때문에 env의 환경변수 활용이 가능하다.
  
  
  

"gen-supabaseTypes": "npx supabase login && npx dotenv supabase gen types typescript --project-id \"$SUPABASE_PROJECT_ID\" > types/database.types.ts"

• 이후 yarn gen-supabaseTypes 로 실행하면 정상적으로 로그인 후 types 파일이 생성되는 것을 확인가능하다.

Typescript 실제 적용 및 사용

• 위와 같이 Database 를 import 하여 client에 추가하여 타입 유형정의를 제공한다.

Typescript 활용 - return 타입 정의

• controll.type.ts 로 새로운 타입을 만든다음 generate한 type 파일에서 Database를 가져온다

• 위 설정은 Database의 public의 Tables 필드에 접근한 후, 해당 table필드들 중 product라는 테이블의 Row (데이터 한 줄)의 타입에 접근하는 방식이다.

• 이는 실제 생성된 타입파일의 Database 타입 구조를 보면 왜 저렇게 사용하는지를 쉽게 이해가능하다.
  
  
  

• 이후 실제 사용하는 api 로직에서 위와 같이 return<Product>() 로 타입지정을 통해 api 요청결과에 대한 타입을 추론가능하게 된다.

• 만약 복수의 값을 가져온다면 위처럼 타입을 지정해주면 되겠다.

• 타입을 지정해주었기에 이제 return 되는 data 객체 내부의 값에 바로 접근이 가능해진다.

+a) supabase cli 내 변수의 필요성 ?

앞서 $SUPABASE_PROJECT_ID 를 추가해 사용하던 cli 명령어문에서 해당 변수를 임의로 지워도 정상적으로 type파일이 생성됨을 확인했다.
dotenv-cli 를 이용한 변수설정 방식이 잘못된건지, 명확히 파악이 되지 않는다.
그나마 현재 추론 가능한 점은 supabase login 이후 인증토큰을 받은 상태로 접근하기에 내 프로젝트에 이미 연동된 상태로 타입파일이 정상적으로 생성될 수 있는 것으로 생각된다.