useInsert response type is ambiguous

[kachar]

As I've started using useInsert hook in the codebase I've noticed that the return type of execution function is Data | Data[] while the supabase api always responds with Data[]

export declare type UseInsertState<Data = any> = {
    // ..
    data?: Data | Data[] | null;
    // ..
};

Sample response from single insert:

[
  {
    "id": "3d2d0d09-73bd-402d-9000-5c22b6af295f",
    "name": "Lorem ipsum"
  }
]

References

• https://supabase.io/docs/reference/javascript/insert
• https://github.com/supabase/postgrest-js/blob/791dc09c92dfcb5a8dd064a1e02ac554a1ad0127/src/lib/PostgrestQueryBuilder.ts#L61
• https://postgrest.org/en/stable/api.html#embedding-after-insertions-updates-deletions

At the same time it's quite tedious task to do the distinction if the hook response is Data or Data[] in terms of types.

Let's discuss some possible solutions to ease the development friction or to provide documentation for such cases.

[tmm]

Thanks for bringing this up. I agree that this is confusing and adds unnecessary ambiguity to the response type.

The reason the response is typed as Data | Data[] | null is because of the single modifier that can be chained onto filter. For example, most of the time data is a list (Data[]), but by adding .single() only one value is returned (Data):

type Todo = {
  id: number
  name: string
  ...
}

const [{ count, data, error, fetching }, reexecute] = useSelect<Todo>('todos', {
  filter: (query) => query.eq('id', 123).single(),
})

// Access property: data.id ✅
// Not a list: data.length 🚫

I'm open to solutions: TypeScript wizardry, maybe a useSingleSelect hook, etc.