A supabase persist-plugin

[gousta]

I'm happy to help develop a persist-plugin for supabase, I'm going to find a way to sync my local state to supabase anyway so it might be beneficial to kill 2 birds with 1 stone

[jmeistrich]

That would be great! We're considering migrating some of our apps to Supabase so we're very interested too, and I'd be happy to assist with what I can and help maintain it into the future.

I have an almost complete Firebase Realtime Database plugin that I'm planning to add to this repo within a few weeks. I can share the current version with you to show what a persistence plugin looks like, although it's mostly Firebase specifics and a plugin really just has to implement listen and save.

The main thing I'm not sure of (because I haven't used Supabase or Postgres) is whether it's possible to auto-create the tables or whether we'd need a separate step for creating tables.

If you want to start getting into it, send me a message on Twitter and I can send you the Firebase code and discuss it more? Or we can just discuss here if you prefer.

[DawidWraga]

@jmeistrich @gousta

This plugin would be absolutely amazing for so many people. The next.js eco system is in need of elegant state management solutions that work across client and server.

There are many people that feel frustrated with adapting to the new paradigms and patterns introduced in next app dir and I think this is mostly because open source package haven't caught up to the changes yet.

I really believe that legend state has the potential to fill this gap and greatly improve development speed + DX, particularly if the firebase and supabase plugin APIs are done right.

I really appreciate your work on this and hope to hear any update soon! Thank you and please reach out to me if there is any way that I could possibly help. My discord is @dawidcodes :)

[rikur]

@gousta did you start this work?

[jmeistrich]

We've been working on a big rewrite to the core which will make a Supabase plugin much easier. We're going to be releasing a version 3 pretty soon and will look into creating a Supabase plugin shortly after. If anyone wants to collaborate or help test that please let me know!

[jmeistrich]

I just released 3.0 alpha which has a new sync system and a Supabase plugin 🎉

New sync docs: https://legendapp.com/open-source/state/v3/sync/persist-sync/
Supabase plugin docs: https://legendapp.com/open-source/state/v3/sync/supabase/

Please let me know if it needs any improvements!

[dasjn]

Hi Jay,
Thanks for your support. I'm almost there, but I'm experiencing some issues:

• Inconsistency between devices when I create a message and delete it using another device.
• Persistence and sync seem to not be working accurately. When I disconnect the internet from a device and make some local changes, these changes are not reflected when I reconnect to the network.

I tested this example with Firebase in the previous version, and these errors do not occur.
https://expo.dev/blog/offline-first-apps-with-expo-and-legend-state

My question is whether this issue is related to the alpha version, or if you see something in the code that might be missing for it to work correctly. Thanks again.

import { View, Text, Button, FlatList, ActivityIndicator } from "react-native";
import { createClient } from "@supabase/supabase-js";
import { Database } from "@/database.types";
import { observable } from "@legendapp/state";
import {
  configureSyncedSupabase,
  syncedSupabase,
} from "@legendapp/state/sync-plugins/supabase";
import { observer } from "@legendapp/state/react";
import UUID from "react-native-uuid";
import { ObservablePersistAsyncStorage } from "@legendapp/state/persist-plugins/async-storage";

const supabase = createClient<Database>(
  "MOCK_URL",
  "MOCK_ANON"
);

const generateId = () => UUID.v4().toString();
configureSyncedSupabase({
  generateId,
});

const messages$ = observable(
  syncedSupabase({
    supabase,
    collection: "messages",
    select: (from) => from.select("*"),
    actions: ["read", "create", "update"],
    persist: {
      name: "messages",
      plugin: ObservablePersistAsyncStorage,
    },
    realtime: true,
    changesSince: "last-sync",
    fieldCreatedAt: "created_at",
    fieldUpdatedAt: "updated_at",
    fieldDeleted: "deleted",
  })
);

const HomeScreen = observer(function HomeScreen() {
  const messages = messages$.get();

  function addMessage(text: string) {
    const id = generateId();
    messages$[id].set({
      id,
      text: observable(text), // Wrap text with observable
      created_at: observable(null), // Initialize with null, handled by Supabase
      updated_at: observable(null), // Initialize with null, handled by Supabase
      deleted: observable(false), // Wrap deleted with observable
    });
  }

  function updateMessage(id: string, text: string) {
    messages$[id].text.set(text);
  }

  function deleteMessage(id: string) {
    messages$[id].deleted.set(true);
  }

  return (
    <View
      style={{
        flex: 1,
        alignItems: "center",
        justifyContent: "center",
        marginVertical: 50,
      }}
    >
      {messages ? (
        <FlatList
          data={Object.values(messages).filter((item) => item && !item.deleted)}
          keyExtractor={(item) => item.id}
          renderItem={({ item }) => (
            <View
              style={{
                flexDirection: "row",
                justifyContent: "space-between",
                gap: 30,
                marginVertical: 2,
              }}
            >
              <Text>{item.text ?? "No text"}</Text>
              <Button
                title="UPDATE"
                onPress={() => updateMessage(item.id, "Message updated")}
              ></Button>
              <Button
                title="DELETE"
                onPress={() => deleteMessage(item.id)}
              ></Button>
            </View>
          )}
        />
      ) : (
        <ActivityIndicator />
      )}
      <Button
        title="Add Expense"
        onPress={() =>
          addMessage(`testing ${(Math.random() * 100).toFixed(0)}`)
        }
      />
    </View>
  );
});

export default HomeScreen;

[jmeistrich]

Sorry for the delay! It's been a mad couple of weeks!

This may be a big part of the problem. You don't need to wrap children in observable - that ends up creating a separate observable and linking it, and that may be causing weirdness with syncing. I understand why you did that - the order of overloads of the set functions was causing error messages that made it seem like children need to be observable. That's fixed in the latest version.

messages$[id].set({
      id,
      text: observable(text), // Wrap text with observable
      created_at: observable(null), // Initialize with null, handled by Supabase
      updated_at: observable(null), // Initialize with null, handled by Supabase
      deleted: observable(false), // Wrap deleted with observable
    });

Change it to just not have observable in there.

messages$[id].set({
      id,
      text,
      created_at: null, // Initialize with null, handled by Supabase
      updated_at: null, // Initialize with null, handled by Supabase
      deleted: false
    });

Inconsistency between devices when I create a message and delete it using another device.

This may be fixed by the above, but I'm not 100% sure. Please let me know if that's still not working.

Persistence and sync seem to not be working accurately. When I disconnect the internet from a device and make some local changes, these changes are not reflected when I reconnect to the network.

The retry option in syncedSupabase is what makes it retry until it saves. See https://legendapp.com/open-source/state/v3/sync/persist-sync/#synced. Firebase handles that internally which is why it was working for you before, but Supabase does not so we need to opt-in to Legend-State's retry behavior for that.

[dasjn]

Hi Jay, no worries about the delay.

I just tried what you suggested, and it's still not working. I'm using two devices for input. When I disconnect one of them and perform an action, like a soft delete or creating a new item, then reconnect it, the action doesn't seem to sync with the database. What's interesting is that if I click again, for example, to create a new task (both devices connected now), that new task gets created on both devices, but the previous one remains only on the device that created it while offline.

I'm using this version of the dependency: "@legendapp/state": "^3.0.0-alpha.39."

Is there anything else I should keep in mind? If you have some time, I could share the repo with you in case you want to test it on your device. I’m trying to migrate a project I’ve been working on, but until I’m sure that local-first will work reliably, I don’t think I’ll be able to proceed.

Thanks again for your help!

[dasjn]

Spent some time trying to figure out what’s going on with async storage:

Adding first task with connection ON: It gets stored on the local storage and then updated.

 LOG  Stored items: {
  "messages__m": {
    "pending": {
      "835d2252-28a8-4d7e-a0cd-46fc888c8e11": {
        "p": null,
        "t": [
          "object"
        ],
        "v": {
          "id": "835d2252-28a8-4d7e-a0cd-46fc888c8e11",
          "text": "testing 75",
          "created_at": null,
          "updated_at": null,
          "deleted": false
        }
      }
    }
  }
}
 LOG  Stored items: {
  "messages": {
    "835d2252-28a8-4d7e-a0cd-46fc888c8e11": {
      "id": "835d2252-28a8-4d7e-a0cd-46fc888c8e11",
      "text": "testing 75",
      "created_at": "2024-09-19T09:33:16.552433+00:00",
      "updated_at": "2024-09-19T09:33:16.552433+00:00",
      "deleted": false
    }
  },
  "messages__m": {
    "pending": {},
    "lastSync": 1726738396552
  }
}

Adding second task with connection OFF, closing the app, and restarting it with connection ON: It gets stored on the local storage, but the updated is not being applied.

 LOG  Stored items: {
  "messages": {
    "835d2252-28a8-4d7e-a0cd-46fc888c8e11": {
      "id": "835d2252-28a8-4d7e-a0cd-46fc888c8e11",
      "text": "testing 75",
      "created_at": "2024-09-19T09:33:16.552433+00:00",
      "updated_at": "2024-09-19T09:33:16.552433+00:00",
      "deleted": false
    },
    "3dd12ce6-e4f6-4315-9abf-cc15a24566db": {
      "id": "3dd12ce6-e4f6-4315-9abf-cc15a24566db",
      "text": "testing 69",
      "created_at": null,
      "updated_at": null,
      "deleted": false
    }
  },
  "messages__m": {
    "pending": {
      "3dd12ce6-e4f6-4315-9abf-cc15a24566db": {
        "p": null,
        "t": [
          "object"
        ],
        "v": {
          "id": "3dd12ce6-e4f6-4315-9abf-cc15a24566db",
          "text": "testing 69",
          "created_at": null,
          "updated_at": null,
          "deleted": false
        }
      }
    },
    "lastSync": 1726738396552
  }
}

After that, if I log local storage again, it seems that the message has been synced because it is removed from messages__m, but the lastSync value hasn't changed and the messages haven't been added to Supabase.

 LOG  Stored items: {
  "messages": {
    "835d2252-28a8-4d7e-a0cd-46fc888c8e11": {
      "id": "835d2252-28a8-4d7e-a0cd-46fc888c8e11",
      "text": "testing 75",
      "created_at": "2024-09-19T09:33:16.552433+00:00",
      "updated_at": "2024-09-19T09:33:16.552433+00:00",
      "deleted": false
    },
    "3dd12ce6-e4f6-4315-9abf-cc15a24566db": {
      "id": "3dd12ce6-e4f6-4315-9abf-cc15a24566db",
      "text": "testing 69",
      "created_at": null,
      "updated_at": null,
      "deleted": false
    }
  },
  "messages__m": {
    "lastSync": 1726738396552
  }
}

I understand that the error might be that the item introduced offline ends up belonging to both the messages collection and the pending collection. There may be a comparator that removes it from pending without it having been inserted into Supabase.

I hope this helps you better understand what’s going on with my issue. Thanks!

[jmeistrich]

Hey @dasjn sorry for the late reply. I just released a beta update yesterday which fixes some AsyncStorage issues, so those may be fixed now :)

But I am seeing some issues with supabase realtime - if you're seeing similar issues could you let me know and we may need to report it to supabase? #362 (comment)

[jamalx31]

Our Experience with syncedSupabase CREATE Operations (v3.0.0-beta.42)

We ran into the same issue with CREATE operations not syncing to Supabase. After extensive debugging, we found that inserts made via the observable were not being persisted to the database - they would show up locally but disappear after app refresh.

What we tried:

• Setting created_at: null (per docs, fieldCreatedAt determines if record is new)
• Adding generateId to configureSyncedSupabase
• Various combinations of persist, retry, and actions config

Our workaround:

We ended up using a hybrid approach - direct Supabase inserts for writes, Legend State for reads/cache:

// Insert directly into Supabase
const { data } = await supabase
  .from("check_ins")
  .insert({ ... })
  .select()
  .single();

// Update observable with server response for reactive UI
vibeChecks$[data.id].set(data);

This gives us reliable writes + reactive state management. Not ideal, but works until v3 stabilizes.

Environment:

• @legendapp/state: 3.0.0-beta.42
• React Native / Expo
• ObservablePersistMMKV for persistence

Hope this helps others running into the same issue!