Postgres TypeScript Helpers

Supabase-js provides advanced TypeScript helpers for interacting with your Supabase Postgres Database. Since supabase-js version 2.39 QueryResult, and QueryData types are provided to extract the return type for complex queries such as joins.
- Read the docs: supabase.com/docs/guides/api/...
- Watch the Supabase Tips video: • How to generate TypeSc...
🎙️ Presented by Thor Schaeff (@thorwebdev go.thor.bio/x)
Chapters
00:00 Intro & recap
00:20 New type shorthands and type helpers
00:58 Initialize a new local supabase project
01:10 Create a new init migration
02:13 Create a new Supabase function
02:46 Generate TypeScript types from your database schema
03:21 Start supabase locally and apply the init migration
04:05 New type shorthands for Tables and Enums
04:45 Enable Deno in vscode for Supabase Edge Functions
05:45 Initialize a supabase-js client
07:05 Supply the Database TypeScript types to the client
07:45 Build a simple query in supabase-js
08:37 Use the Table type shorthand
09:35 Get the type for complex tables with QueryData type helper
12:50 QueryResult & QueryError type helpers

[@Supabase]

Thanks for tuning in! You can find the docs here: supabase.com/docs/guides/api/rest/generating-types#helper-types-for-tables-and-joins?GNmdB01ryec

[@hawarhekmat1174]

Supabase docs is a bit messy, for example I want to learn something about dabatase, but actually when I use auth docs I can learn more about it more than the actual database docs 😢😢

[@Supabase]

Sorry to hear that. Can you give use a concrete example so we can improve it?

[@hawarhekmat1174]

@@Supabase of course, for example I want to use supabase database with js/ts when I open db docs I want to learn about CRUD operations I only get how to do that operations, but for same purpose when I use auth docs I get more, maybe it's because auth is so deeply integrated with db, but what if I want to use database with a js framework like next there is no docs for that unless I use auth, then I get package helpers.

[@justpatrick_]

Where was the generte types button moved to on the new dashboard

[@jekabskarklins]

This is good for your own little projects. For large projects with more than one collaborator the added complexity for the value is too much. I would go with clean simple SQL queries and specify return datatypes myself by picking them from predefined TS types. Jm2c

[@superurgmail]

Thanks, nice video. I see that the 'cities' is expected to be an array of objects w. 'id' and 'name' - I see that it is nested as cities ( id, name, ) Now, what if some nested data is only an object - e.g. id: 1234-1234-2134 ... prime_minister: { id: '649b1a48-2bf5-4b4d-a0af-7152c259544b', first_name: 'John', last_name: 'Doe' } ... How should I define/nest it initially? Some of my returned data has both objects and arrays.

[@asaphhere]

pls can you do an updated video on google sign in native login, there’s been a massive change and ur current tutorial is outdated. this will help 10,000 + beginner devs

[@jonathangamble]

This is nice, but would be better if it did this automatically.

[@thorwebdev]

Can you clarify? It’s pretty much automatic, what’s the part you feel is manual?

[@jonathangamble]

Hi @@thorwebdev , if you didn't have to use "QueryData" at all, and { data } was just the exact type automatically of your query without haven't to manually create types.

[@thorwebdev]

@@jonathangamble data is exactly that type. The helper is meant for you to extract the type outside of running the query, e.g. if you need the type for your UI component etc.

[@jonathangamble]

Ok, nice! Didn't realize that.

[@Broski_Rodragweez]

But now your types use plural names! So in your code, even when you have a single object instance the type name is plural. Something to think about now that we have all this tech that can generate code from data models, you have to consider what gets leaked down to your API interface. In code it is much more common to have Country for single & County[] for many. And then there is the snake_case that leaks from your database table fields into your javascript where snake_case is very uncommon these days.

[@dheerajs2838]

not complex at all

[@thorwebdev]

I have a feeling this might be irony? If so, sorry about that, anything in particular that you feel is too complex?