Loading initial data from remote offline-enabled sync map without network connection

[kinday]

Hi, not sure if it is a bug or I am doing something wrong, so I’ll start with discussion.

How is offline-first experience supposed to work? I’m using server-client setup with IndexedStore and Logux Server storing the data in a DB (i.e. not zero-knowledge) and anything done with remote store does not work if Logux client is disconnected:

• on page load: filter is stuck in loading state and no data is ever returned;
• on create/update: promises stay in pending state.

If I look at IndexedDB rows, there are both last known server actions and not-synced-yet client actions, so I assume that filter’s “response” can be derived from these log entries but alas, as I said, client tries to get hold of connection and does not resolve any promises while in reconnecting state.

Relevant code examples

// ./src/lib/logux/client

export const clientStore = Logux.createClientStore(sessionStore, (session) => {
  return new Logux.CrossTabClient({
    server: 'ws://example.com',
    store: new Logux.IndexedStore(),
    subprotocol: 1,
    userId: session.userId
  });
});

// ./src/lib/logux/thing-store

export const thingStore = syncMapTemplate('things', {
  offline: true,
  remote: true
});

<!-- ./src/routes/+page.svelte -->
<script lang="ts">
  import { clientStore } from '$lib/logux/client';
  import { thingStore } from '$lib/logux/thing-store';

  const allThings = createFilter($clientStore, thingStore, {});
</script>

<main>
  {#each $allThings as thing, i (thing.id)}
    <div>This is never rendered</div>
  {/each}
</main>

I have managed to alter some conditionals related to offline and remote handling in @logux/client which results in data being loaded as I expect but these changes make a lot of tests go red and I am struggling to debug and fix them without going really deep into Logux implementation.

[ai]

Short answer: you need to set reasons in preadd log’s event.

Logux on current state is a framework to provide you prototypes to build different systems.

Right now out of the box we have full-local system per-model for SyncMap.

1. If you pass offline: true to syncMapTemplate() it will look at local IndexedDB for own actions.
2. Then you need to set meta.reasons in client.log.on('preadd', cb) to define what actions need to be cached locally. Here is an example: https://github.com/hplush/slowreader/blob/main/core/client.ts#L103-L116

But the idea, is that you can define custom store with own local-first logic and with log/channels/reasons primitives define any complex logic.

For instance, I am planning to create SQLite stores for full local and end-to-end encryption case.

[kinday]

I have tried what you suggested but it does not seem to solve the issue, filter is still stuck in loading state forever.

I have managed to alter the client to make it work by allowing offline sync maps to resolve eagerly. The problem seems to not be about log implementation but about promise lifecycle that is dependent on server processing.

[ai]

I am using filters with offline: true, remote: false and they works.

Maybe you have remote: true? In this case it is by design to not be sure about the results without internet (but you can use filter.get().list before the isLoading.