💡 Local-first example of the Epic Stack

[kentcdodds]

Now that clientLoader and clientAction are released, local-first development with Remix becomes much easier.

I would love to see an example of the Epic Stack using a local-first approach (probably could use remix-owa as some inspiration).

There are two ways we could do this:

1. Make an app that doesn't have a backend database at all
2. Make an app that downloads relevant bits from the database and keeps things synchronized

I'd love to see both as an example so if you're interested, feel free to do either approach. I recommend IndexDB as the client-side backend.

Don't worry so much about making it perfect (like migrations of IndexDB would be a fun challenge, but don't get hung up on that). Examples are just to demonstrate what's possible and give people interesting ideas.

This should be pretty fun and interesting. You don't need permission to start working on it. Just go for it. You'll find instructions on how to make an example in the docs.

Cheers!

[kentcdodds]

Someone has offered $500 to whoever does this using https://reflect.net/

https://twitter.com/aboodman/status/1736205341833166878?t=R-Cj-7tU3kPFysDzg5pIcg&s=19

[rishi-raj-jain]

https://github.com/rishi-raj-jain/epic-local cc @aboodman

Claim for the reflect task!

Note:

clientLoader approach fails to work for being realtime-local-first in this case as I can't attach a subscription listener.

I can return the params from the clientLoader and achieve the same that I've right now using useParams.

This repo showcases the local-first functionality for My Notes section. The approach can be extended to wherever required in the app.

[kentcdodds]

Looks awesome @rishi-raj-jain! Do you think you could update the README to explain a couple key points of the necessary code changes?

[rishi-raj-jain]

@kentcdodds

Done 🚀

[aboodman]

@rishi-raj-jain this is ... epic (::groan::). Will review today and confirm, and if everything looks good, will send you that loot!

[rishi-raj-jain]

Looking forward to the loot 😇

https://github.com/rishi-raj-jain/epic-local is now complete and ready for your review ✨

[rishi-raj-jain]

Hey @kentcdodds,

How can one use GraphQL subscriptions with clientLoader to get realtime updates? Is it possible / makes sense to do so? cc @aboodman

I do this right now as 👇

1. clientLoader -> return some data
2. component -> useState use the initial data from clientLoader
3. component -> useEffect listen to graphql subscription and set the state when it changes

but wonder if there's a way to have clientLoader re-run or be reactive so that I don't need to go through custom setup of useState & useEffect

[kentcdodds]

I think what you described is the best way to do this.

[rishi-raj-jain]

Now that clientLoader and clientAction are released, local-first development with Remix becomes much easier.

Some feedback 👇🏻

I had expected clientLoader and clientAction to be a drop-in replacement for loader and action but as they run on the client, they don't have the access to server-utilities (which are present on the server, say accessible inaction for example) such as form encoded data, and prisma instance for example.

(or in place of)

Maybe https://remix.run/docs/en/main/route/client-loader should clearly indicate that it's not exactly a drop-in replacement?

[kentcdodds]

I believe you can call the loader and action from the client loader/action using the serverLoader and serverAction arguments as documented. So if you need something from the server then that's how you accomplish it.