ocexnn Posts - Answer Overflow

ocexnn

•Created by ocexnn on 1/20/2025 in #help

How to handle initial undefined state

Hey guys! I need some help on something that is probably trivial to a lot of you. I am using the useLiveQuery hook to get and then display data on a screen in my app (it's a todo app and i'm essentially getting the list data to be able to display) . The problem is that whenever I want to access said data, I ALWAYS have to use the optional selector to handle the initial undefined state. So my code is FILLED with a whole bunch of ? marks... How do you guys avoid having to do this?? I've used React Query before and the nice thing with them is that their useQuery hook returns a loading state that I can use to handle the initial undefined state of data and then display it, but I don't have that kind of feature with Drizzle. Any help would be appreciated, I've been on this "issue" for days now and I can't find any docs or help about it online.

1 replies

DTDrizzle Team

•Created by ocexnn on 1/16/2025 in #help

How to deal with initial undefined data

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;

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;

2 replies

Gaming

Programming