Update Type Implementation (supabase-js side)

example/next-ts/generated.ts

@@ -0,0 +1,29 @@
+/**
+ * This file was auto-generated by openapi-typescript.
+ * Do not make direct changes to the file.
+ */
+
+export interface paths {
+  /* snip */
+}
+
+export interface definitions {
+  users: {
+    /**
+     * Note:
+     * This is a Primary Key.<pk/>
+     */
+    id: string
+    username: string
+    status: string
+    group: number
+  }
+}
+
+export interface parameters {
+  /* snip */
+}
+
+export interface operations {
+  /* snip */
+}

example/next-ts/package.json

@@ -5,7 +5,8 @@
   "scripts": {
     "dev": "next dev",
     "build": "next build",
-    "start": "next start"
+    "start": "next start",
+    "typegen": "openapi-typescript --output generated.ts https://[YOUR_SUPABASE_ID].supabase.co/rest/v1/?apikey=[YOUR_SUPABASE_ANON_KEY]"
   },
   "dependencies": {
     "@supabase/supabase-js": "file:../..",
@@ -14,6 +15,7 @@
     "react-dom": "17.0.0"
   },
   "devDependencies": {
-    "@types/react": "^16.9.53"
+    "@types/react": "^17.0.0",
+    "openapi-typescript": "^3.0.0"
   }
 }

example/next-ts/pages/api/users.ts

@@ -1,25 +1,24 @@
 import { NextApiRequest, NextApiResponse } from 'next'
 import { createClient } from '@supabase/supabase-js'
 
-const supabase = createClient(process.env.NEXT_PUBLIC_SUPABASE_URL, process.env.SUPABASE_SECRET_KEY)
+import { definitions } from '../../generated'
 
-type User = {
-  id: string
-  username: string
-  status: 'ONLINE' | 'OFFLINE'
-  group: number
-}
+const supabase = createClient<definitions>(
+  process.env.NEXT_PUBLIC_SUPABASE_URL,
+  process.env.SUPABASE_SECRET_KEY
+)
 
 export default async (req: NextApiRequest, res: NextApiResponse) => {
   // Get all users
-  const { data: users } = await supabase.from<User>('users').select()
+  const { data: users } = await supabase.from('users').select()
 
   // Get just one OFFLINE user
   const { data: user } = await supabase
-    .from<User>('users')
+    .from('users')
     .select('*')
     .eq('status', 'OFFLINE')
     .limit(1)
     .single()
+
   res.status(200).json({ one_id: user.id, many_users: users })
 }

src/SupabaseClient.ts

@@ -2,7 +2,7 @@ import { DEFAULT_HEADERS } from './lib/constants'
 import { SupabaseClientOptions } from './lib/types'
 import { SupabaseAuthClient } from './lib/SupabaseAuthClient'
 import { SupabaseQueryBuilder } from './lib/SupabaseQueryBuilder'
-import { PostgrestClient } from '@supabase/postgrest-js'
+import { PostgrestClient, SchemaBase, TableBase } from '@supabase/postgrest-js'
 import { RealtimeClient, RealtimeSubscription } from '@supabase/realtime-js'
 
 const DEFAULT_OPTIONS = {
@@ -19,7 +19,7 @@ const DEFAULT_OPTIONS = {
  *
  * An isomorphic Javascript client for interacting with Postgres.
  */
-export default class SupabaseClient {
+export default class SupabaseClient<S extends SchemaBase = SchemaBase> {
   /**
    * Supabase Auth allows you to create and manage user sessions for access to data that is secured by access policies.
    */
@@ -68,13 +68,13 @@ export default class SupabaseClient {
    *
    * @param table The table name to operate on.
    */
-  from<T = any>(table: string): SupabaseQueryBuilder<T> {
+  from<K extends keyof S>(table: K): SupabaseQueryBuilder<S, K> {
     const url = `${this.restUrl}/${table}`
-    return new SupabaseQueryBuilder<T>(url, {
+    return new SupabaseQueryBuilder<S, K>(url, {
       headers: this._getAuthHeaders(),
       schema: this.schema,
       realtime: this.realtime,
-      table,
+      table: table as string,
     })
   }
 
@@ -84,7 +84,7 @@ export default class SupabaseClient {
    * @param fn  The function name to call.
    * @param params  The parameters to pass to the function call.
    */
-  rpc<T = any>(fn: string, params?: object) {
+  rpc<T extends TableBase = TableBase>(fn: string, params?: object) {
     const rest = this._initPostgRESTClient()
     return rest.rpc<T>(fn, params)
   }

src/index.ts

@@ -1,18 +1,20 @@
 import SupabaseClient from './SupabaseClient'
 import { SupabaseClientOptions, SupabaseRealtimePayload } from './lib/types'
-import { User as AuthUser } from '@supabase/gotrue-js'
+import type { User as AuthUser } from '@supabase/gotrue-js'
+import type { SchemaBase } from '@supabase/postgrest-js'
+
 export * from '@supabase/gotrue-js'
 export * from '@supabase/realtime-js'
 
 /**
  * Creates a new Supabase Client.
  */
-const createClient = (
+const createClient = <S extends SchemaBase = SchemaBase>(
   supabaseUrl: string,
   supabaseKey: string,
   options?: SupabaseClientOptions
 ) => {
-  return new SupabaseClient(supabaseUrl, supabaseKey, options)
+  return new SupabaseClient<S>(supabaseUrl, supabaseKey, options)
 }
 
 export { createClient, SupabaseClient, SupabaseClientOptions, SupabaseRealtimePayload, AuthUser }

src/lib/SupabaseQueryBuilder.ts

@@ -1,9 +1,12 @@
-import { PostgrestQueryBuilder } from '@supabase/postgrest-js'
+import { PostgrestQueryBuilder, SchemaBase } from '@supabase/postgrest-js'
 import { SupabaseRealtimeClient } from './SupabaseRealtimeClient'
 import { RealtimeClient } from '@supabase/realtime-js'
 import { SupabaseEventTypes, SupabaseRealtimePayload } from './types'
 
-export class SupabaseQueryBuilder<T> extends PostgrestQueryBuilder<T> {
+export class SupabaseQueryBuilder<
+  S extends SchemaBase,
+  K extends keyof S
+> extends PostgrestQueryBuilder<S[K]> {
   private _subscription: SupabaseRealtimeClient
   private _realtime: RealtimeClient
 
@@ -34,7 +37,7 @@ export class SupabaseQueryBuilder<T> extends PostgrestQueryBuilder<T> {
    */
   on(
     event: SupabaseEventTypes,
-    callback: (payload: SupabaseRealtimePayload<T>) => void
+    callback: (payload: SupabaseRealtimePayload<S[K]>) => void
   ): SupabaseRealtimeClient {
     if (!this._realtime.isConnected()) {
       this._realtime.connect()