Typescript support in V2 with reading foreign tables

Has anyone had any luck getting this to work using v2? seems like the example from the docs does not work - https://supabase.com/docs/reference/javascript/next/typescript-support#nested-tables

In my opinion this works so much better in V1 like below:

import { useQuery } from '@tanstack/react-query';

import supabase from './supabase';
import { Listing } from './types';

export async function getListings() {
  const query = `
    id,
    title,
    price,
    photos,
    seller: profiles (id, name, city, state),
    categories (name, slug)
  `;

  return supabase.from<Listing>('listings').select(query);
}

export const useGetListings = () => {
  return useQuery(['home', 'listings'], () => getListings());
};

import { useQuery } from '@tanstack/react-query';

import supabase from './supabase';
import { Listing } from './types';

export async function getListings() {
  const query = `
    id,
    title,
    price,
    photos,
    seller: profiles (id, name, city, state),
    categories (name, slug)
  `;

  return supabase.from<Listing>('listings').select(query);
}

export const useGetListings = () => {
  return useQuery(['home', 'listings'], () => getListings());
};

import { useQuery } from '@tanstack/react-query';

import supabase from './supabase';
import { Listing } from './types';

export async function getListings() {
  const query = `
    id,
    title,
    price,
    photos,
    seller: profiles (id, name, city, state),
    categories (name, slug)
  `;

  return supabase.from<Listing>('listings').select(query);
}

export const useGetListings = () => {
  return useQuery(['home', 'listings'], () => getListings());
};

import { useQuery } from '@tanstack/react-query';

import supabase from './supabase';
import { Listing } from './types';

export async function getListings() {
  const query = `
    id,
    title,
    price,
    photos,
    seller: profiles (id, name, city, state),
    categories (name, slug)
  `;

  return supabase.from<Listing>('listings').select(query);
}

export const useGetListings = () => {
  return useQuery(['home', 'listings'], () => getListings());
};

Using V2 as instructed in the docs but does not work

import { useQuery } from '@tanstack/react-query';

import supabase from './supabase';
import type { Database } from './database.types';

export async function getListings() {
  const response = await supabase.from('listings').select(`
    id,
    title,
    price,
    photos,
    seller: profiles (id, name, city, state),
    categories (name, slug)
  `);

  return response;
}

export const useGetListings = () => {
  return useQuery(['home', 'listings'], () => getListings());
};

type profiles = Database['public']['Tables']['profiles']['Row'];
type ListingsResponse = Awaited<ReturnType<typeof getListings>>;
export type ListingsResponseSuccess = ListingsResponse['data'] & {
  seller: profiles;
};

import { useQuery } from '@tanstack/react-query';

import supabase from './supabase';
import type { Database } from './database.types';

export async function getListings() {
  const response = await supabase.from('listings').select(`
    id,
    title,
    price,
    photos,
    seller: profiles (id, name, city, state),
    categories (name, slug)
  `);

  return response;
}

export const useGetListings = () => {
  return useQuery(['home', 'listings'], () => getListings());
};

type profiles = Database['public']['Tables']['profiles']['Row'];
type ListingsResponse = Awaited<ReturnType<typeof getListings>>;
export type ListingsResponseSuccess = ListingsResponse['data'] & {
  seller: profiles;
};

import { useQuery } from '@tanstack/react-query';

import supabase from './supabase';
import type { Database } from './database.types';

export async function getListings() {
  const response = await supabase.from('listings').select(`
    id,
    title,
    price,
    photos,
    seller: profiles (id, name, city, state),
    categories (name, slug)
  `);

  return response;
}

export const useGetListings = () => {
  return useQuery(['home', 'listings'], () => getListings());
};

type profiles = Database['public']['Tables']['profiles']['Row'];
type ListingsResponse = Awaited<ReturnType<typeof getListings>>;
export type ListingsResponseSuccess = ListingsResponse['data'] & {
  seller: profiles;
};

import { useQuery } from '@tanstack/react-query';

import supabase from './supabase';
import type { Database } from './database.types';

export async function getListings() {
  const response = await supabase.from('listings').select(`
    id,
    title,
    price,
    photos,
    seller: profiles (id, name, city, state),
    categories (name, slug)
  `);

  return response;
}

export const useGetListings = () => {
  return useQuery(['home', 'listings'], () => getListings());
};

type profiles = Database['public']['Tables']['profiles']['Row'];
type ListingsResponse = Awaited<ReturnType<typeof getListings>>;
export type ListingsResponseSuccess = ListingsResponse['data'] & {
  seller: profiles;
};

jdgamble555•9/25/22, 10:38 PM

Please reformat this code so that people can read it using three backticks and the 'typescript' keyword like here - https://dirask.com/posts/Markdown-how-to-make-blocks-of-TypeScript-code-syntax-highlighting-github-dev-to-stackoverflow-jMmawj

As far as your question, it is using the types generated from the database. Make sure your types file is generated correctly or it won't work. If it doesn't work, you need to give more information on why.

Dirask.com, IT Community

Markdown - how to make blocks of TypeScript code (syntax highlighti...

In this article, we would like to show you how to create blocks of TypeScript code with syntax highlighting in markdown. To create a block of TypeScript code wi...

appixel.devOP•9/25/22, 10:59 PM

@jdgamble555 Sorry about that I fixed the code snippet! Yes I followed the doc to the T and generated the types and the foreign key fields always show unknown with typescript errors. My question is has anyone else successfully tried this?

jdgamble555•9/25/22, 11:24 PM

Can you screen shot the error with the code exactly so we can see what you're talking about?

appixel.devOP•9/26/22, 12:09 AM

@jdgamble555 sure here is screenshot using V2 (you can see seller is coming back as unknown so when these props are accessed below there is typescript error) also note types are generated and client is being injected with Database . Also my v2 code snippet was added to my original post where I'm adding the custom types per the documentation

const supabase = createClient<Database>(supabaseUrl, supabaseAnonKey);

const supabase = createClient<Database>(supabaseUrl, supabaseAnonKey);

Screen_Shot_2022-09-25_at_7.05.54_PM.png

jdgamble555•9/26/22, 12:15 AM

hmm... not my specialty, but I wonder if that is from the eslint plugin

jdgamble555•9/26/22, 12:15 AM

not necessarily an error from supabase? not sure

appixel.devOP•9/26/22, 12:16 AM

You can see the types that are not foreign keys have proper types from injecting the Databse into client

Jjdgamble555 hmm... not my specialty, but I wonder if that is from the eslint plugin

Juliano•9/26/22, 12:16 AM

Isn’t tsserver that does that and not eslint?

Aappixel.dev You can see the types that are not foreign keys have proper types from injecting...

Juliano•9/26/22, 12:17 AM

Yep

appixel.devOP•9/26/22, 12:17 AM

But with v1 by injecting the type into from statement works perfect I just really hate start my new project off with using V1

Juliano•9/26/22, 12:18 AM

I’m not sure if I have the same problem as you, I’ll check when I’m back to my desk

appixel.devOP•9/26/22, 12:19 AM

Thanks @Juliano really appreciate it!

Juliano•9/26/22, 2:05 AM

Arf, actually I have an issue. I can't give you my feedback rn, I'll give it to u tomorrow during the day. Sry, for the delay

appixel.devOP•9/26/22, 2:10 AM

No worries I actually just threw together small codesandbox project replicating the problem - https://codesandbox.io/s/supabase-javascript-v2-typescript-mei3t3

CodeSandboxappixel

supabase-javascript-v2-typescript - CodeSandbox

supabase-javascript-v2-typescript by appixel using @supabase/supabase-js, @tanstack/react-query, react, react-dom, react-scripts

Gazreyn•10/8/22, 8:13 PM

Sorry to jump in but was wondering if you had any luck when it comes to typing foreign keys / relationships. I'm not exactly an expert with Typescript but I've been super struggling achieving this. When following the example in the docs, it simply doesn't work.

Gazreyn•10/9/22, 5:05 AM

@appixel.dev I found a way around this for now

type MoviesResponseSuccess = (NonNullable<MoviesResponse['data']>[0] & {
  actors: actors[]
})[]

type MoviesResponseSuccess = (NonNullable<MoviesResponse['data']>[0] & {
  actors: actors[]
})[]

appixel.devOP•11/3/22, 5:45 PM

Hey @Gazreyn, No luck with this at all and the code snippet above doesn't seem to work for me

Typescript support in V2 with reading foreign tables

Similar Threads

Similar Threads

Similar Threads