proposal: Tutorial + example app for CRUD applications

[w7tf]

Hey @jmeistrich 👋

I believe that apart from speed, what really sets Legend State apart is its ability to sync. While the documentation mentions CRUD sync, I think a tutorial would be beneficial to make it easier for new users.

What I'd like to propose is a tutorial similar to the one for Remix (https://remix.run/docs/en/main/start/tutorial) - perhaps a bit less detailed - where a CRUD sync app is built.

My idea is to create a fairly simple application where users can view posts, read comments on each post, and create new posts. All powered by Legend State CRUD sync, of course.

I'd use tRPC for type safety. We could even implement real-time functionality through tRPC's SSE or WebSockets capability. For the backend, I'd either use NextJS or an Express / Fastify web server.

What do you think? Would such a tutorial be beneficial? And since I'm fairly new to Legend State myself, would you have time to check my CRUD sync implementation of the tutorial? 😅 Also, under which section would this tutorial go on the website? Under CRUD sync or a new tutorial category?

[jmeistrich]

That sounds fantastic! I think a tutorial would be incredibly helpful. I would be very happy to check your implementation so we make sure it's perfect 👍.

I think we should have a new Tutorials page in the sidebar, and we could also link to that tutorial from the sync/crud pages.

[w7tf]

Wonderful! Where shall the code go? Perhaps an examples folder in the repo or do you want to split it out to a different repo?

[jmeistrich]

Hmm, I think it should probably go in the legend-docs repo, but I'm not 100% decided yet... Start it in your own for now and we can move it in there when it's ready?

[tao101]

@w7tf @jmeistrich it's for sure needed tried to use it for an app last week with nextjs and had an issue with the implementation where i could not sync ids the item returned from create is not synced back to the list

eg i push this item to the list {
name:"Hello",
lastName:"world",
}

the create would return {
id:17,
name:"Hello",
lastName:"world",
profileImage:"url"
}

the problem i was facing is create would return that item but it will not replace the old item on the list

[jmeistrich]

@tao101 The problem there is that it needs a unique id to know which element in the list to modify when it returns. Without an id it can't know for sure which element it was.

• It could try to match against name/lastName, but it's possible they can change between sending the request and it returning
• It could match at the array index, but it's possible the array could be sorted or have an element inserted at the front, so that would be wrong

So the only real safe way to do it is to generate the id client side.

Are you using the crud plugin? It should be logging warnings if you create an element without an id... But I see the docs is missing an explanation about id fields. I'll add something to the docs.

[tao101]

@jmeistrich yes i got that warnings and started using
id:name+ lastName
thinking that if the oncreate returned a different id it will overwrite this id but it does not i tried to use the onSave to override the id but it did not work maybe i missed something tbh this is the first time i would use legend state and give it only around 2 hours

i did not generate the id on the client side as there is no way to avoid collisions with that

[abduraufsherkulov]

@jmeistrich How can we call async function like this? When I call it, $auth.auth.set(..), somehow fetch is never triggered

export const auth$ = observable<{
  auth: Auth;
  addSmth: (data: AuthSchema) => Promise<void>;
}>({
  auth: persistOptions({
    initial: {
      accessToken: null,
      email: null,
      invoiceNumber: null,
    },
    set: async ({ value }) => {
      console.log("Setting value:", value);
      const response = await appFetch<{ token: string }>("/api/login", {
        method: "POST",
        data: value,
      });
    persist: {
      name: "auth",
    },
  }),