S
Supabase•3y ago
#Oskar

How to properly add types for nested tables in SvelteKit

So based on the example from docs: 
 
import supabase from '~/lib/supabase'
import type { Database } from '~/lib/database.types'

async function getMovies() {
  return await supabase.from('movies').select('id, title, actors(*)')
}

type actors = Database['public']['Tables']['actors']['Row']
type MoviesResponse = Awaited<ReturnType<typeof getMovies>>
type MoviesResponseSuccess = MoviesResponse['data'] & {
  actors: actors[]
}
 
import supabase from '~/lib/supabase'
import type { Database } from '~/lib/database.types'

async function getMovies() {
  return await supabase.from('movies').select('id, title, actors(*)')
}

type actors = Database['public']['Tables']['actors']['Row']
type MoviesResponse = Awaited<ReturnType<typeof getMovies>>
type MoviesResponseSuccess = MoviesResponse['data'] & {
  actors: actors[]
}
type MoviesResponseSuccess = any tyoe MovieResponse = any actors is correctly typed, but actors is just a part of whole reponse by doing this I losing types for movies as they becoming an any type, Im still learning typescript and may doing an easy mistakes but I basing very much on examples from docs and other sources, and it looks like it should works, but its not. How to do it properly? My full +page.server.ts file looks like that: 
import { error } from '@sveltejs/kit';
import { supabase } from '$lib/supabaseClient';
import type { PageServerLoad, PageServerLoadEvent } from './$types';
import type { Database } from '$lib/database.types';

export const load: PageServerLoad<{ movies }> = async ({ params }: PageServerLoadEvent) => {
    const { data: movies, error: err } = await (<RankingsResponseSuccess>supabase
        .from('movies')
        .select(
            `*, actor1 (name, slug), actor2 (name, slug),`
        )
        .eq('slug', params.slug)
        .limit(1)
        .single());
    if (err) {
        throw error(404, err.message);
    }

    if (movies) {
        return {
            movies: movies
        };
    }
};

type actor1 = Database['public']['Tables']['actors']['Row'];
type actor2 = Database['public']['Tables']['actors']['Row'];

type RankingsResponse = Awaited<ReturnType<typeof load>>;
export type RankingsResponseSuccess = RankingsResponse['movies'] & {
    actor1: actor1[],
        actor2: actor2[]
};
import { error } from '@sveltejs/kit';
import { supabase } from '$lib/supabaseClient';
import type { PageServerLoad, PageServerLoadEvent } from './$types';
import type { Database } from '$lib/database.types';

export const load: PageServerLoad<{ movies }> = async ({ params }: PageServerLoadEvent) => {
    const { data: movies, error: err } = await (<RankingsResponseSuccess>supabase
        .from('movies')
        .select(
            `*, actor1 (name, slug), actor2 (name, slug),`
        )
        .eq('slug', params.slug)
        .limit(1)
        .single());
    if (err) {
        throw error(404, err.message);
    }

    if (movies) {
        return {
            movies: movies
        };
    }
};

type actor1 = Database['public']['Tables']['actors']['Row'];
type actor2 = Database['public']['Tables']['actors']['Row'];

type RankingsResponse = Awaited<ReturnType<typeof load>>;
export type RankingsResponseSuccess = RankingsResponse['movies'] & {
    actor1: actor1[],
        actor2: actor2[]
};
Am I doing something wrong?
1 Reply
#Oskar
#OskarOP•3y ago
I init supabase client like that: export const supabase = createClient<Database>(supabaseUrl, supabaseAnonKey);

Did you find this page helpful?