Incorrect Supabase TypeScript for associated record, when fetching a list of items

[AbdullahAhmadAAK]

Bug report

• [YES] I confirm this is a bug with Supabase, not with my own application.
• [YES] I confirm I have searched the Docs, GitHub Discussions, and Discord.

Describe the bug

TypeScript issue comes up. I fetch an array of sessions, and each of them has one app record associated with it. I am fetching the associated record with this syntax: app:apps(id, app_name,....) But when I type it like that, TypeScript expects an array to be returned. I used RawSessionData to have an array, which I would then convert manually to an object as the value for the app key.

But then , the reality is that the associated app record comes up as an object, despite supabase's TS suggesting that it will come up as an array.

To Reproduce

Steps to reproduce the behavior, please provide code snippets or a repository:

This is the supabase data handling function:

async function fetchSessionsFromSupabase(timeframe: UsageHistoryPageTimeframe, datetimeValue: Date, user: User) {
      .......
  const { data: rawSessionsData, error: sessionsError }: { data: SupabaseSessionRaw[] | null, error: unknown } = await supabase
    .from('sessions')
    .select('id, session_start_time, session_end_time, ip_address, duration_in_seconds, app:apps(id, app_name, platform, package_name, version_name)')
    .eq('user_id', user.id)
    .not('duration_in_seconds', 'is', null)
    .not('session_end_time', 'is', null)
    .gte('session_start_time', startTimeMinLimit)
    .lt('session_start_time', startTimeMaxLimit)

  if (sessionsError) throw sessionsError

  console.log('rawSessionsData is this: ', rawSessionsData)

  const sessionsData: SupabaseSession[] = rawSessionsData == null ? [] : rawSessionsData?.map(rawSessionData => {
    if (rawSessionData.app.length !== 1) throw new Error('One of the fetched sessions does not have an app associated with it')
    return transformSession(rawSessionData)
  })

  return { sessionsData: sessionsData || [], sessionsError }
}

These are the types:

type SupabaseSession = {
  id: number;
  session_start_time: string;
  session_end_time: string;
  ip_address: string;
  duration_in_seconds: number;
  app: AppInfo;
};

type SupabaseSessionRaw = {
  id: number;
  session_start_time: string;
  session_end_time: string;
  ip_address: string;
  duration_in_seconds: number;
  app: AppInfo[]; // There will only be one app though. That is enforced in the way supabase is set up. But when we fetch it, it comes as an array, so we manually modify it to become 1 object.
};

Expected behavior

The TypeScript should not be giving any issues.

Screenshots

System information

• OS: Windows
• Version of supabase-js: ^2.45.0
• Version of Node.js: 20.17.11

[CodeLeom]

Hello @AbdullahAhmadAAK, I would like to work on this issue.

The issue here is a mismatch between what TypeScript expects from the Supabase query and what's actually returned.

How to tackle the issue

• To tackle this issue, I need to update the type definition to match what superbase actually returns.
• Modify the query to make sure it returns data in the expected format

If assigned this issue, I will ensure compliance with the project's guidelines.

[AbdullahAhmadAAK]

@CodeLeom you have my blessing, sir. I am not part of the supabase team so can't assign you.