How to deal with initial undefined data

[rochajulian]

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;

Also, how do you guys make the query return a single object rather than an array with the object? Notice how I always have to say list[0] to access the data that i want. I would love to know how to be able to simplify that. Of course I could make a state that stores list[0] but I want to know if I can make the query itself return the single object instead. Thanks.