TypeScript made specifically for organizing and handling data within Supabase

Question

TypeScript made specifically for organizing and handling data within Supabase

I created a file named "types.ts" to efficiently utilize types generated with Supabase CLI.

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

export type Tables<T extends keyof Database['public']['Tables']> =
  Database['public']['Tables'][T]['Row'];

export type Enums<T extends keyof Database['public']['Enums']> =
  Database['public']['Enums'][T];

However, I am struggling to make it work with a query that requires a join operation.

The code functions correctly in simple cases such as

type EventListItemProps = {
  event: Tables\<"events"\>
}

This allows me to access properties like event.name and event.table1.name. Yet, the IDE indicates that "Property 'table1' does not exist on type."

I considered adding something like the following for each SELECT statement with a join:

type EventListItemProps = {
  event: Tables\<"events"\> & {
    table1: Tables\<"table1\"\>;
  };
}

However, having to do this for every join case would be tedious. If possible, I am looking for a more generic solution that can handle most situations.

Thank you for any assistance, and please overlook any errors in my English!

typescript react-native expo supabase supabase-database

Answer 1

Answer №1

If you're using Supabase, they offer a convenient tool that can generate types for you (supabase-type-generator)

To begin, start by generating the types with the following commands:

npx supabase gen types typescript --project-id "$PROJECT_REF" --schema public > types/supabase.ts
// or if working locally
npx supabase gen types typescript --local > types/supabase.ts

Once that's done, you can easily retrieve the type of any query with Supabase like this:

const queryResult = supabase.from('events').select(`
  event_id,
  table1 (
    field1
  )
`)

type EventListItemProps = QueryData<typeof queryResult>

const { data, error } = await queryResult
if (error) throw error

const eventListItem: EventListItemProps = data

Answer 2

If you're using Supabase, they offer a convenient tool that can generate types for you (supabase-type-generator)

To begin, start by generating the types with the following commands:

npx supabase gen types typescript --project-id "$PROJECT_REF" --schema public > types/supabase.ts
// or if working locally
npx supabase gen types typescript --local > types/supabase.ts

Once that's done, you can easily retrieve the type of any query with Supabase like this:

const queryResult = supabase.from('events').select(`
  event_id,
  table1 (
    field1
  )
`)

type EventListItemProps = QueryData<typeof queryResult>

const { data, error } = await queryResult
if (error) throw error

const eventListItem: EventListItemProps = data

Answer 3

Answer №2

Thank you for your assistance. I have a question regarding the correct configuration of my specific scenario:

Currently, I have divided the code into three separate files:

(Note: The table named "events" is actually referred to as "eventi" and "table1" is called "locali")

-api/events/index.ts

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

export const useEventList = () => {
    return useQuery({
        queryKey: ["eventi"],
        queryFn : async()=>{

          const {data, error} = await supabase
            .from("eventi")
            .select(`*, locale:locali(*)`);

          if(error)
            throw new Error(error.message);
          return data;
        }
      });
}

-My Home page (app/events/index.tsx)

import React, { useEffect, useState } from 'react';
import { View, Text, FlatList, ActivityIndicator } from 'react-native';
import EventListItem from "@/components/eventi/EventListItem";
import { useEventList } from '@/api/events';



export default function Home() {
  
  const{data: eventi, error, isLoading} = useEventList();
  
  if(isLoading){
    return <ActivityIndicator />
  }
  
  if(error){
    return <Text>Oops, something went wrong!</Text>
  }
  
  return (
    <View style={{ flex: 1 }}>
    <FlatList
    style={{flex:1}}
    data = {eventi}
    renderItem={({item}) => <EventListItem evento={item}/>}
    numColumns={1}
    contentContainerStyle={{gap:10, padding:10}}
    // columnWrapperStyle={{gap:10}}
    />
    </View>
  );
}

-EventListItem component

import { StyleSheet, View, Text, Pressable, Image, } from 'react-native';
import {Tables} from "@/types";
import { Link } from 'expo-router';
import { Colors } from '@/constants/Colors';

type EventListItemProps = {
    evento: Tables<"eventi"> & {
        locale: Tables<"locali">;
      };
}

const EventListItem = ({evento}: EventListItemProps) => {
    const dayjs = require('dayjs');
    const eventDate = dayjs(evento.dt_inizio).format("DD/MM");
    return(
        <Link href={`/eventi/${evento.id}`} asChild>
            <Pressable style={styles.card}>
                {/* <Image
                    source = {{uri: evento.img || "" }}
                /> */}
                <Text>{evento.nome}</Text>
                <Text>{evento.locale.nome}</Text>
                <Text>{eventDate}</Text>
            </Pressable>
        </Link>
    )
}

const styles = StyleSheet.create({
    card: {
        flex: 1,
        borderRadius: 7,
        paddingVertical: 5,
        paddingHorizontal: 8,
        backgroundColor: Colors.light.tabIconSelected,
    }
})

export default EventListItem;

Any suggestions or recommendations are appreciated. As I am in the initial stages of my project, I am open to changing the structure and approach. Currently, I opted for this setup after exploring various tutorials as it appeared organized and concise.

Answer 4

Thank you for your assistance. I have a question regarding the correct configuration of my specific scenario:

Currently, I have divided the code into three separate files:

(Note: The table named "events" is actually referred to as "eventi" and "table1" is called "locali")

-api/events/index.ts

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

export const useEventList = () => {
    return useQuery({
        queryKey: ["eventi"],
        queryFn : async()=>{

          const {data, error} = await supabase
            .from("eventi")
            .select(`*, locale:locali(*)`);

          if(error)
            throw new Error(error.message);
          return data;
        }
      });
}

-My Home page (app/events/index.tsx)

import React, { useEffect, useState } from 'react';
import { View, Text, FlatList, ActivityIndicator } from 'react-native';
import EventListItem from "@/components/eventi/EventListItem";
import { useEventList } from '@/api/events';



export default function Home() {
  
  const{data: eventi, error, isLoading} = useEventList();
  
  if(isLoading){
    return <ActivityIndicator />
  }
  
  if(error){
    return <Text>Oops, something went wrong!</Text>
  }
  
  return (
    <View style={{ flex: 1 }}>
    <FlatList
    style={{flex:1}}
    data = {eventi}
    renderItem={({item}) => <EventListItem evento={item}/>}
    numColumns={1}
    contentContainerStyle={{gap:10, padding:10}}
    // columnWrapperStyle={{gap:10}}
    />
    </View>
  );
}

-EventListItem component

import { StyleSheet, View, Text, Pressable, Image, } from 'react-native';
import {Tables} from "@/types";
import { Link } from 'expo-router';
import { Colors } from '@/constants/Colors';

type EventListItemProps = {
    evento: Tables<"eventi"> & {
        locale: Tables<"locali">;
      };
}

const EventListItem = ({evento}: EventListItemProps) => {
    const dayjs = require('dayjs');
    const eventDate = dayjs(evento.dt_inizio).format("DD/MM");
    return(
        <Link href={`/eventi/${evento.id}`} asChild>
            <Pressable style={styles.card}>
                {/* <Image
                    source = {{uri: evento.img || "" }}
                /> */}
                <Text>{evento.nome}</Text>
                <Text>{evento.locale.nome}</Text>
                <Text>{eventDate}</Text>
            </Pressable>
        </Link>
    )
}

const styles = StyleSheet.create({
    card: {
        flex: 1,
        borderRadius: 7,
        paddingVertical: 5,
        paddingHorizontal: 8,
        backgroundColor: Colors.light.tabIconSelected,
    }
})

export default EventListItem;

Any suggestions or recommendations are appreciated. As I am in the initial stages of my project, I am open to changing the structure and approach. Currently, I opted for this setup after exploring various tutorials as it appeared organized and concise.

TypeScript made specifically for organizing and handling data within Supabase

Answer №1

Answer №2

Similar questions

Iterate over the key-value pairs in a loop

React: Unable to locate an index signature with a parameter of type 'string' on type N

The specialized middleware in Next.js gets dispatched to the browser

Combining multiple arrays of objects using multiple keys with Angular 9 and Typescript

Using the fs module in a React Native application

The array is not being spliced in the DOM, however, it is being spliced in the console - Ionic 2+/Angular

The class-transformer malfunctioning: The transformation function is not being executed

Having trouble getting the useStep hook function to work with an onClick arrow function?

Error encountered: The database is not found during the migration creation process in MikroORM

Encountered a problem while setting up React app using npm

The system encountered an error: "__fbBatchedBridge" variable cannot be located

Can you explain the return value of array.find() in Typescript or Java script?

extracting the HTML content from JavaScript and saving it into a standalone file

Converting an array of form data into JSON using Angular and Typescript

Troubles encountered with ionic's usage of [innerHTML] within <ion-list>

React Native: The state value is being interpreted as undefined

Angular - finding an elegant solution for handling multiple HTTP requests

What is the process of importing types in TypeScript?

Encountering a getStaticProps error while using Typescript with Next.js

Angular6 returns the result after subscribing to an HTTP POST request