reactjstypescriptdatabasereal-timesupabase

Supabase payload datatype in TypeScript


I am attempting to use supabase on my ReactJS Typescript project but not sure what is the data type of channel payload response and i wish to get the eventType and new data.

 const handleInserts = () => {
    console.log("Change Insert");
    (payload ) => {
      const eventType = payload.eventType
    };
  };

  supabase
    .channel("example")
    .on(
      "postgres_changes",
      { event: "*", schema: "public", table: "example" },
      handleInserts
    )
    .subscribe();

As much as possible i don't want to use type any for this

enter image description here


Solution

  • Your callback subscribed function is wrong and it is not typed.

    It should look like this:

    type MyType = {
      name: string;
      age: number;
    };
    
    const handleInserts = (payload: RealtimePostgresChangesPayload<MyType>) => {
      if (payload.eventType === 'INSERT') {
        // do your stuff
      }
    };
    

    Here is a link to a typed playground: