ian•17mo ago

Pair with offline local-first library?

@FlipOneUp writes: What local-first, offline-capable JS/TS library can I use with Convex to make it a fully-offline-capable, auto-data-sync’ing tech stack?

30 Replies

ianOP•17mo ago

Good question. There’s a couple sides to this: 1. What are good libraries for this in general 2. Which pair well with Convex / which are compatible. For 1: I haven’t evaluated many options. Zustand comes to mind. Did you have one(s) in mind you want to use? I haven’t integrated one yet but I imagine the solution would look like wrapping useQuery and useMutation calls either generically by normalizing your function API (seems like a lot of work and you lose some of the benefit of convex), or by normalizing reads / writes manually per-endpoint on the client. This is more work, but allows you to decide which mutations are worth persisting, which pieces of data can be trusted client-side, etc. Which parts of your app do you want to persist locally and which wouldn’t make sense?

Michal Srb•17mo ago

Hey @FlipOneUp, from my search RxDB https://rxdb.info/ would be the closest for integration, but I haven't actually tried it out. If you do let us know how it goes.

RxDB - A client side, offline-first, reactive database for JavaScri...

FlipOneUp•17mo ago

Thanks! Yes, RxDB is one of the options I’m looking into. I was curious, though, if the Convex Team has tested one or more of these local-first, offline-capable, data-syncing libs with Convex.

Cruz•17mo ago

Hey @FlipOneUp , I also was looking for smth like this and bumped into this https://localfirstweb.dev/. Have you seen this? or maybe tried any of them already?

Local-First Web Development

A fresh way to think about building web applications.

FlipOneUp•17mo ago

Yes, I’ve bookmarked this a few months ago — this is a good resource for the various technologies available for doing local-first dev. What I liked to find out from the Convex team is the library that they “know” works well with Convex, being that Convex has a different architecture. Thanks for joining the conversation!

Cruz•17mo ago

you already tested RxDB with Convex?

FlipOneUp•17mo ago

Not yet. I’m looking for a lib that provides more than what RxDB offers, esp. in the amount of code to write to handle the frontend-backend data sync.

FleetAdmiralJakob 🗕 🗗 🗙•8mo ago

@FlipOneUp @Cruz Hi, I'm also looking right now into how I can make my app offline usable. Did you found anything in your apps? If yes, are your apps open-source, so I can look into your implementation?

Indy•8mo ago

This is an old thread. But a few folks have tried replicache successfully: https://github.com/ericstlouis/replicache-x-convex https://github.com/sujayakar/replicache-convex

GitHub

GitHub - ericstlouis/replicache-x-convex: Todo app

Todo app. Contribute to ericstlouis/replicache-x-convex development by creating an account on GitHub.

GitHub

GitHub - sujayakar/replicache-convex

Contribute to sujayakar/replicache-convex development by creating an account on GitHub.

FleetAdmiralJakob 🗕 🗗 🗙•6mo ago

With the upcoming release of Zero Replicache is dead. And there will be no support for systems like Convex in Zero 😦 https://discord.com/channels/830183651022471199/1246101458928144434/1265460032816939072

ianOP•6mo ago

I believe the code we're using from Replicache is client-only and in fact it'll get easier since you won't need to have a license key, if they're open sourcing it? You mean "dead" as in not actively developed / improved? Agree there is a need for a tighter integration with a local-first technology. Would a maintained fork of Replicache be compelling? Or do you have something you prefer / look to for inspiration, like automerge, yjs, zustand, dxos?

FleetAdmiralJakob 🗕 🗗 🗙•6mo ago

Hmm, idk, I think a fork would work good. But I dont know the other projects so I will try them out first

FleetAdmiralJakob 🗕 🗗 🗙•4mo ago

Hi, look what I found today. Maybe there already is a solution for all the problems. Since Convex has tanstack query support it is possible to use something like the legend state manager to have local first features. https://legendapp.com/open-source/state/v3/

Legend State

FleetAdmiralJakob 🗕 🗗 🗙•4mo ago

not tried it out yet but definitely will and share my experience here

Cruz•4mo ago

is it necessarily has to be Tanstack Query? I see they also have a CRUD options, maybe that would be also usefull w/ Convex, no?

FleetAdmiralJakob 🗕 🗗 🗙•4mo ago

Thats the CRUD option

FleetAdmiralJakob 🗕 🗗 🗙•4mo ago

https://legendapp.com/open-source/state/v3/

Legend State

Cruz•4mo ago

yeah, I saw, that's why I was curious is the integration should be through tanstack query, is it possible to use it w/ convex directly?

FleetAdmiralJakob 🗕 🗗 🗙•4mo ago

Hmm idk. Lets try it out

Kevin07•4mo ago

Curious; any luck so far?

FleetAdmiralJakob 🗕 🗗 🗙•4mo ago

I did not try it out yet. I will do it today.

FleetAdmiralJakob 🗕 🗗 🗙•4mo ago

So as I look into it it should work because the Supabase and Keel plugins are also build on top of the crud plugin

FleetAdmiralJakob 🗕 🗗 🗙•4mo ago

But I haven't got anything working yet I will take a look how the Keel and Supabase plugins work and just try to do the same with convex Oh holy shit. This is a mess

FleetAdmiralJakob 🗕 🗗 🗙•4mo ago

So because the CRUD example looked to complicated to me (skill issue ik ik) i first wanted to try out the tanstack thingy but ran into this problem: https://pastebin.com/cCPT8dMp. My code:

"use client";

import { useQuery } from "convex/react";
import { api } from "../../convex/_generated/api";
import { useQueryClient } from "@tanstack/react-query";
import { useObservableSyncedQuery } from "@legendapp/state/sync-plugins/tanstack-react-query";
import { convexQuery } from "@convex-dev/react-query";

export default function Home() {
  const queryClient = useQueryClient();
  const state$ = useObservableSyncedQuery({
    queryClient,
    query: convexQuery(api.tasks.get, {}),
  });

  // Call get to start the sync
  const state = state$.get();
  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24"></main>
  );
}

"use client";

import { useQuery } from "convex/react";
import { api } from "../../convex/_generated/api";
import { useQueryClient } from "@tanstack/react-query";
import { useObservableSyncedQuery } from "@legendapp/state/sync-plugins/tanstack-react-query";
import { convexQuery } from "@convex-dev/react-query";

export default function Home() {
  const queryClient = useQueryClient();
  const state$ = useObservableSyncedQuery({
    queryClient,
    query: convexQuery(api.tasks.get, {}),
  });

  // Call get to start the sync
  const state = state$.get();
  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24"></main>
  );
}

FleetAdmiralJakob 🗕 🗗 🗙•4mo ago

If I look at the example it seems to only require a querykey and a queryfn and both is provided by convexQuery but idk: https://legendapp.com/open-source/state/v3/sync/tanstack-query/

Legend State

TanStack Query plugin

FleetAdmiralJakob 🗕 🗗 🗙•4mo ago

Created an issue for that on the legend-state repo too: https://github.com/LegendApp/legend-state/issues/358

GitHub

Tanstack Query Client does not work with Convex' Tanstack Query Plu...

If you try out this code with all the configuration described here: https://docs.convex.dev/client/tanstack-query "use client"; import { useQuery } from "convex/react"; import {...

Jayzus•3mo ago

Heya, Legend State developer here. @Cruz posted in our discord that you were having some trouble getting the Query plugin working with Convex. I'm taking a look now. Oh somehow I missed your github issue, sorry about that! I've been deep in getting things ready for v3 beta. @FleetAdmiralJakob 🗕 🗗 🗙 I replied to the github issue. I'm swamped with a bunch of stuff at the moment so if you could help me out with a sample repo that would be a huge help! Otherwise I'll try to get it to in the next week or so. But I think the best solution will be a Convex plugin on top of the crud plugin. That should be a better experience overall than piggybacking on Query. That might even be easier than trying to fix it running through Query. I'll try to get to that some time soon.

FleetAdmiralJakob 🗕 🗗 🗙•3mo ago

Sure, today Im doing a trip but maybe in the evening I can help.

Tom Redman•3mo ago

I would LOVE to see where this goes! What an amazing melding of projects 😍

Jayzus•3mo ago

@FleetAdmiralJakob 🗕 🗗 🗙 @Tom Redman To avoid spamming this more general thread I made a new thread for that, and I could use your help to make sure I'm doing it the correct Convex way. https://discord.com/channels/1019350475847499849/1289187277465059338/1289187277465059338