Typescript relationship types

[mikevarela]

Hey everyone, running into an issue that I'm struggling with.

For the sake of this, I have two tables with a reference from one to the other.

**Project**
id: uuid
name: string
type: string
project_manager_id: uuid | Null (references table 'User')


**User**
id: uuid
first_name: string
last_name: string
type: string

The generated Supabase types for Project list the 'project_manager_id' type as String | Null. However, when I perform a lookup like

const { data, error } = await supabase
      .from("project")
      .select(
        `*, project_manager_id(*)`
      )
      .eq("id", id)
      .returns<ProjectType>()
      .single();

the project_manager_id is now an object with referenced data.

The issue is in my app, when displaying the data in the UI, I get typescript errors that the type for this field should be string or null, not an object. I can rewrite the type from scratch to widen for this case but it sidesteps the autogenerated types from Supabase which is a hassle and might break things.

Any advice on how to fix these typescript errors? The app is working and data is displayed correctly, but I'd like to make sure typescript is satisfied.

Thanks!!

[aybeedee]

Well you're explicitly overriding the response type with returns<ProjectType>() so it is behaving in the intended manner.
If you want to infer the type based on the query, you need to not enforce your own type; it shouldn't complain then as it'll know that the id has been populated with an object:

const { data, error } = await supabase
  .from("project")
  .select(
    `*, project_manager_id(*)`
  )
  .eq("id", id)
  .single();

// TypeScript should not complain here
const projectManagerName = data.project_manager_id.first_name;

If you want to infer the type for use elsewhere, you can do something like this (docs):

import { QueryData } from "@supabase/supabase-js";

const projectWithManagerQuery = supabase
  .from("project")
  .select(
    `*, project_manager_id(*)`
  )
  .eq("id", id)
  .single();

type ProjectWithManagerData = QueryData<typeof projectWithManagerQuery>;
const { data, error } = await projectWithManagerQuery;
const projectWithManagerData: ProjectWithManagerData = data;

const projectManagerName = projectWithManagerData.project_manager_id.first_name;

Also, if you want to create a query-specific type whilst still adhering to the generated types, you should also be able to do something like this (this should work with your original overriding implementation):

import { Tables } from "./database.types";

type ProjectType = Omit<Tables<"project">, "project_manager_id"> & {
  project_manager_id: Tables<"user">
}

const { data, error } = await supabase
  .from("project")
  .select(
    `*, project_manager_id(*)`
  )
  .eq("id", id)
  .returns<ProjectType>()
  .single();

const projectManagerName = data.project_manager_id.first_name;