1
I'm trying define the types for the data from supabse I cannot and I got the error message.
"type '{ id: string; title: string; capacity: number | null; start_date: Date | null; start_time: string | null; end_date: Date | null; end_time: string | null ; image_url: string | null; event_participate: { ... ; }[]; }[] | null' cannot be assigned to type 'Event[]'. Cannot assign type 'null' to type 'Event[]'."
I've followed the official document below but but I haven't found the solution yet. Could you tell me how I can define the Array from supabse? https://supabase.com/docs/reference/javascript/typescript-support
I would be very grateful if someone could point me in the right direction.
Here are the codes.
#event-index.tsx
"use client";
import Link from "next/link";
import Card from "@mui/material/Card";
import CardContent from "@mui/material/CardContent";
import Typography from "@mui/material/Typography";
import { Container, CardMedia, Stack } from "@mui/material";
import GlobalHeader from "@/components/globalHeader";
import format from "date-fns/format";
import { ReactNode } from "react";
interface Event {
id: string;
title: string;
capacity: number;
start_date: Date;
start_time: string;
end_date: Date;
end_time: string;
image_url: string;
event_participate: {
length: ReactNode;
id: string;
};
}
type TypedEvent = {
eventList: Array<Event>;
};
const EventIndex: React.FC<TypedEvent> = ({ eventList }) => {
const events = eventList && eventList;
return (
<>
<div>
<div>
<GlobalHeader />
</div>
<div>
<Container component="main" fixed sx={{ mt: 10 }}>
<Stack direction="row" spacing={2}>
{events &&
events.map((event: Event) => (
<div key={event.id}>
<Card sx={{ maxWidth: 345 }}>
<div>
{" "}
<CardMedia
component="img"
sx={{ height: 140 }}
image={event.image_url}
alt="イベントの表紙"
/>
</div>
<CardContent>
<Typography gutterBottom variant="h5" component="div">
<Link href="/event/[id]" as={`/event/${event.id}`}>
{event.title}
</Link>
</Typography>
<Typography
variant="body2"
color="text.secondary"
component="div"
>
<div>
{format(new Date(event.start_date), "yyyy/MM/dd")}
{event.start_time}-{" "}
{format(new Date(event.end_date), "yyyy/MM/dd")}
{event.end_time}
</div>
</Typography>
<Typography
variant="body2"
color="text.secondary"
component="div"
>
参加者数：{event.event_participate.length}/
{event.capacity}
</Typography>
</CardContent>
</Card>
</div>
))}
</Stack>
<div>
{" "}
<Link href="/event-input">イベントを企画する</Link>
</div>
</Container>
</div>
</div>
</>
);
};
export default EventIndex;
#page.tsx
import EventIndex from "./event-index";
import { supabase } from "@/utils/supabase";
import { ReactNode } from "react";
interface Event {
id: string;
title: string;
capacity: number;
start_date: Date;
start_time: string;
end_date: Date;
end_time: string;
image_url: string;
event_participate: {
length: ReactNode;
id: string;
};
}
const Event = async () => {
type DbResult<T> = T extends PromiseLike<infer U> ? U : never;
const query = supabase
.from("events")
.select(
`
id,title,capacity,start_date,start_time,end_date,end_time,image_url,
event_participate ( id )`
)
.eq("is_published", true);
const events: DbResult<typeof query> = await query;
return (
<>
<EventIndex eventList={events && events.data} />
</>
);
};
export default Event;
#database.types.ts
export type Json =
| string
| number
| boolean
| null
| { [key: string]: Json | undefined }
| Json[];
export interface Database {
public: {
Tables: {
event_participate: {
Row: {
id: number;
participated_event_id: string | null;
participating_account_id: string | null;
};
Insert: {
id?: number;
participated_event_id?: string | null;
participating_account_id?: string | null;
};
Update: {
id?: number;
participated_event_id?: string | null;
participating_account_id?: string | null;
};
Relationships: [
{
foreignKeyName: "event_participate_participated_event_id_fkey";
columns: ["participated_event_id"];
referencedRelation: "events";
referencedColumns: ["id"];
},
{
foreignKeyName: "event_participate_participating_account_id_fkey";
columns: ["participating_account_id"];
referencedRelation: "profiles";
referencedColumns: ["id"];
}
];
};
events: {
Row: {
capacity: number | null;
description: string;
end_date: Date | null;
end_time: string | null;
host_id: string | null;
id: string;
image_url: string | null;
is_published: boolean | null;
place: string | null;
place_link: string | null;
start_date: Date | null;
start_time: string | null;
title: string;
};
Insert: {
capacity?: number | null;
description: string;
end_date?: Date | null;
end_time?: string | null;
host_id?: string | null;
id?: string;
image_url?: string | null;
is_published?: boolean | null;
place?: string | null;
place_link?: string | null;
start_date?: Date | null;
start_time?: string | null;
title: string;
};
Update: {
capacity?: number | null;
description?: string;
end_date?: Date | null;
end_time?: string | null;
host_id?: string | null;
id?: string;
image_url?: string | null;
is_published?: boolean | null;
place?: string | null;
place_link?: string | null;
start_date?: Date | null;
start_time?: string | null;
title?: string;
};
Relationships: [
{
foreignKeyName: "events_host_id_fkey";
columns: ["host_id"];
referencedRelation: "profiles";
referencedColumns: ["id"];
}
];
};
profiles: {
Row: {
avatar_url: string | null;
full_name: string | null;
id: string;
updated_at: string | null;
username: string | null;
website: string | null;
};
Insert: {
avatar_url?: string | null;
full_name?: string | null;
id: string;
updated_at?: string | null;
username?: string | null;
website?: string | null;
};
Update: {
avatar_url?: string | null;
full_name?: string | null;
id?: string;
updated_at?: string | null;
username?: string | null;
website?: string | null;
};
Relationships: [
{
foreignKeyName: "profiles_id_fkey";
columns: ["id"];
referencedRelation: "users";
referencedColumns: ["id"];
}
];
};
};
Views: {
[_ in never]: never;
};
Functions: {
[_ in never]: never;
};
Enums: {
[_ in never]: never;
};
CompositeTypes: {
[_ in never]: never;
};
};
}
export type Tables<T extends keyof Database["public"]["Tables"]> =
Database["public"]["Tables"][T]["Row"];
You shouldn't define your own types like this.
interface Event {
id: string;
title: string;
capacity: number;
start_date: Date;
start_time: string;
end_date: Date;
end_time: string;
image_url: string;
event_participate: {
length: ReactNode;
id: string;
};
}
Instead, just use the types that Supabase has generated for you:
type Event = Database['public']['Tables']['events']['Row']
The code is not verified, but hopefully you get the idea.