Tab contention?

[lukasb]

I'm encountering an intermittent issue in which useLiveQuery will sometimes return undefined despite IndexedDB having data.

• Only occurs on mobile Webkit (maybe desktop but haven't tried hard to reproduce here)
• No error is thrown in useLiveQuery
• Only happens when other tabs are also open to my app
• When this happens, opening another tab to my app will always exhibit the same problem
• Closing all other tabs open to my app instantly fixes the problem, useLiveQuery then successfully returns data. (Usually don't have to close all other tabs to get it to work, just closing some is enough.)

It's almost as if one of the tabs is stuck in a state where it's keeping a lock that prevents the other tabs from reading the db, and closing that tab fixes the problem. But I don't have any code in my app that would prevent other tabs from reading from the db.

const pages = useLiveQuery(async () => {

    if (!session || !session.id) return [];

    const localPages = await localDb.pages
      .where("userId")
      .equals(session.id)
      .toArray();

    const queuedUpdates = await localDb.queuedUpdates
      .where("userId")
      .equals(session.id)
      .toArray();

    if (!localPages || !queuedUpdates) return undefined;

    const mergedPages = [
      ...localPages
        // remove deleted pages
        .filter((page) => !page.deleted)
        // remove pages with queued updates marking them as deleted
        .filter((page) => {
          const queuedUpdate = queuedUpdates.find(
            (update) => update.id === page.id
          );
          return !queuedUpdate?.deleted;
        })
        // replace with queued updates if they exist
        .map((page) => {
          const queuedUpdate = queuedUpdates.find(
            (update) => update.id === page.id
          );
          return queuedUpdate || page;
        }),
      // add queued updates that aren't in the main table
      ...queuedUpdates.filter(
        (update) =>
          !localPages.some((page) => page.id === update.id) && !update.deleted
      ),
    ];
    return mergedPages;
  }, [session]);

[dfahlander]

It is normal that useLiveQuery() returns undefined on initial render before the async querier is done with its result. Is this the case or do you see it returning undefined also after initial render?

[lukasb]

I just checked and I'm using 4.0.9 :/

[dfahlander]

Try if 4.0.10 solves it. There was a bug fixed in 4.0.10: df9b6f0 . The bfcache support was actually introduced in 4.0.1 (not 4.0.10 as I wrote in last comment) but there was a fix in 4.0.10 for it.

[lukasb]

Upgraded to 4.0.10 and added disableBfCache (see below) but it's not fixed yet.

Also, when this state gets triggered (with one tab getting only undefined from useLiveQuery) other tabs that have already loaded content from useLiveQuery are no longer able to write to IndexedDB.

Will see what else I can figure out.

Dexie.disableBfCache = true;

const localDb = new Dexie('orangetask-local', { cache: 'immutable' }) as Dexie & {
  pages: EntityTable<Page, 'id'>;
  queuedUpdates: EntityTable<Page, 'id'>;
  lastRevisionSynced: EntityTable<{ id: string, revisionNumber: number }, 'id'>;
};

[dfahlander]

Ok, seems that it could be something that keeps the database locked som somehow on a lower level. Since you mention webkit mobile, I suppose it's an iOS? Whats version is it?

[lukasb]

iOS 18.1.1

[lukasb]

Some more information if it's helpful ...

useLiveQuery only gets called once. when it gets called ...

• session.id is defined
• localDb.isOpen() returns false
• localDb.pages and localDb.queuedUpdates are defined
• no code is executed after await localDb.pages.where("userId") etc - no error is thrown either

I have a scheduled task in my app that runs every 30 seconds, when that happens ...

• localDb.isOpen() returns true
• same thing, no code is executed after await localDb.pages.where("id") etc - and again, no error is thrown