[FEATURE]: Loading state for useLiveQuery

[rochajulian]

Feature hasn't been suggested before.

• I have verified this feature I'm about to request hasn't been suggested before.

Describe the enhancement you want to request

Hi guys!

I am using the useLiveQuery hook in my Expo app to display data in the UI. It works great...except for one thing. When I go into a page that uses it, I get undefined errors. My understanding is that initially the data would be undefined as Drizzle is still fetching it and once it has fetched it, the data would of been "initialized" and ready to be used in the UI. To get around this, I use optional chaining as you can see in my example below. But this gets really annoying to have to write all the time...

I used to use React Query to fetch data and their hook provides a nice isLoading state that I usually used to say if the data is still loading, return null or a loading state. But with Drizzle's useLiveQuery, I don't have access to a similar state.

How do you guys go about this? More specifically, my question is: how do you guys handle the initial undefined state of your data so that your app does not yell at you for undefined values.

const ListSettings = () => {
  const { id } = useLocalSearchParams();
  const listId = Number(id);
  
  const db = useSQLiteContext();
  const drizzleDb = drizzle(db);
  
  const { data: list } = useLiveQuery(
  drizzleDb
  .select()
  .from(lists)
  .where(and(eq(lists.id, listId), ne(lists.sync_status, "pending_delete")))
  );
  
  return (
    <>
      <Table
      text="Title"
      right="text"
      rightText={list[0]?.title}
      onPress={() => updateListTitleBSMRef.current.present()}
      classes="bg-white"
      />
      
      <Table
        text="Store"
        right="text"
        rightText={list[0]?.store || "Any Store"}
        onPress={() => updateListStoreBSMRef.current.present()}
        classes="bg-white"
      />
    </>
  );
};

export default ListSettings;