#Dont understand what the error is or how to fix it

1 messages · Page 1 of 1 (latest)

torpid creek
# 
import { createClient } from '@supabase/supabase-js';
import type { PostgrestResponse } from '@supabase/supabase-js';
import type { PageLoad } from './$types';
import type { Database } from '../../database.types';

type Message = Database['public']['Tables']['messages']['Row'];

export const load = (async () => {
    const { data: messages }: PostgrestResponse<Message[]> = await supabase
        .from('messages')
        .select('message');

    if (!messages) {
        return { messages: [] };
    }

    return { messages };
}) satisfies PageLoad;

<script lang="ts">
    import type { PageData } from './$types';
    import Message from '../components/Message.svelte';

    export let data: PageData;
</script>

{#each data.messages as message}
    <Message message={message.message} createdAt={message.created_at} />
{/each}

Property 'message' does not exist on type '{ created_at: string | null; message: string | null; id: string; userId: string | null; }[]'.ts(2339)
Property 'created_at' does not exist on type '{ created_at: string | null; message: string | null; id: string; userId: string | null; }[]'.ts(2339)
cinder sun
#

your type is an array

#

not the object itself

torpid creek
#

it cant be

cinder sun
#

that's what your error says

torpid creek
#

probably! this is what supabase generated as types:

  public: {
    Tables: {
      messages: {
        Row: {
          created_at: string | null
          message: string | null
          id: string
          userId: string | null
        }
      }
    }
  }
cinder sun
#

'{ created_at: string | null; message: string | null; id: string; userId: string | null; }[]'

#

what's PageData?

torpid creek
#

magic..

#

no clue wtf it is 😄

#

but I think the error/problem is in my Message type definition

# 
``` should be an object, not an array
cinder sun
#

try hovering over PageData?

torpid creek
#

ah!

cinder sun
#

there's your answer

#

(Message was never used where the error happened so it's not relevant)

torpid creek
#

is this an array in an array

cinder sun
#

it's a 2d array yeah

torpid creek
#

fml if only I knew how to fix it

cinder sun
#

consider string, that's a single string, think of that as a 0d array, a single element
string[] is a 1d array, an array of strings, an array of 0d arrays
string[][] is a 2d array, an array of 1d arrays
etc

#

since it's an interface that seems to be empty, i think there might be some declaration that adds to that interface

torpid creek
#

I modified :

cinder sun
#

don't know supabase though so i don't really know where to look

torpid creek
#

const { data: messages }: PostgrestResponse<Message[]> = await supabase..
to
const { data: messages }: PostgrestResponse<Message> = await supabase

cinder sun
#

try right clicking on PageData, there should be something like Find Declaration that your ide provides

torpid creek
#

now I only need to ensure property is not null

#

(property) message: string
Type 'string | null' is not assignable to type 'string'.
Type 'null' is not assignable to type 'string'.ts(2322)

cinder sun
#

check with a condition, or provide a fallback, or if it's known to be not null, add an assertion

torpid creek
#

sucks a bit to add HTML/template condition to check for null 😦

#

or if it's known to be not null, add an assertion =>

cinder sun
#

message.message!, only use it if you know it is absolutely not null though

torpid creek
#

<script lang="ts">
export let message: string;
export let createdAt: string;
</script>

#

I think if I set these props as optional it may work?

cinder sun
#

or string | null, since that'd make it compatible with the string | null that your message has

torpid creek
#

thanks man! appreciate it! ❤️

#

I mean the component does not make sense with this being null and you wont be able to create null content to begin with

cinder sun
#

then it shouldn't have | null

#

your types should be accurate to what they represent

torpid creek
#

so whats the other alternative to | null ?

cinder sun
#

just... having it be string?

torpid creek
#

I mean to silence the warning

#

🙂

cinder sun
#

if it can't be null then it shouldn't have null in its type

#

i mean Message#message here

torpid creek
#

aha

#

yeap the type is wrong from supabase got it !

#

messages: {
Row: {
created_at: string | null
message: string | null
id: string
userId: string | null
}

#

makes sense

#

thanks again! ❤️