Общий TypeScript для управления данными Supabase

В Supabase есть инструмент для генерации типов (supabase-type-generator)

Сначала сгенерируйте типы

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

И тогда супабаза может предоставить тип любого запроса следующим образом:

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

Спасибо за вашу помощь, я хотел бы попросить вас еще об одной вещи, чтобы правильно настроить мой конкретный случай:

На данный момент я разделил код на три файла:

(Таблица «events» на самом деле называется «eventi», а «table1» — «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;
        }
      });
}

-Моя домашняя страница (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>Ops, qualcosa è andato storto!</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

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;

Любые советы приветствуются, поскольку в начале моего проекта я также могу изменить структуру и логику, сейчас я выбрал этот, потому что, просматривая различные уроки, я нашел этот, и он показался мне изящным.