SolidJS•2y ago

how to use from or reconcile with an external producer

I try to use an external store (https://github.com/nerdslabs/storex) with solid. To try it out I copied the https://www.solidjs.com/tutorial/stores_createstore?solved example and replaced addTodo() with a commit to the external store. The store seems to produce data just fine. This is the console output from the subscribe callback below (After I created the first todo from the frontend).

[
    {
        "completed": false,
        "id": "72b6f1d6-7748-11ed-a08c-e86a64e00a8b",
        "text": "aaa"
    }
]

[
    {
        "completed": false,
        "id": "72b6f1d6-7748-11ed-a08c-e86a64e00a8b",
        "text": "aaa"
    }
]

This is how I update the solid store using reconcile.

const [todos, setTodos] = createStore([]);

store.subscribe((update) => {
  console.log("update", update);
  if (update) setTodos(reconcile(update, { key: "id" }));
});

const [todos, setTodos] = createStore([]);

store.subscribe((update) => {
  console.log("update", update);
  if (update) setTodos(reconcile(update, { key: "id" }));
});

This first todo is rendered correctly. But when I add another todo, the first is rendered again. I attached a screenshot from the inspector where you can see, that the console.log("Creating... outputs aaa twice but the update in the subscribe callback has the right data. When using from I have the same problem. Any pointers are greatly appreciated. I'd love to use solid and Elixir to replace a mad Angular App with Python backend. Thank you!

6 Replies

sebb8200OP•2y ago

I just tried to clone the update before and now it works:

store.subscribe((update) => {
  if (update) {
    // this is new! update and update_ look the same in the log.
    let update_ = update.map((item) => ({...item}));
    setTodos(reconcile(update_));
  }
});

store.subscribe((update) => {
  if (update) {
    // this is new! update and update_ look the same in the log.
    let update_ = update.map((item) => ({...item}));
    setTodos(reconcile(update_));
  }
});

isn't that the point of reconcile that it reconciles using a key (here: default: "id") and not the Object identity....?

Alex Lohr•2y ago

You gave a key to reconcile in your first example. That changes its behavior.

sebb8200OP•2y ago

I ommmited that, because {key: "id"} is the default. With the cloning it also works with explicitly setting the key, and without the cloning it also does not work without setting the key. I did sth stupid here: I did insert the new elements at the beginning of the list. Now I changed to appending and I get the corrects texts. But the toggle still does not work (only with the clone).

Unknown User•2y ago

Message Not Public

sebb8200OP•2y ago

I understand now, that I have to completely clone everything that comes from the external store. reconcile/from do not seem to diff, but to just check if references change. This seems odd, but is good enough for now.

Unknown User•2y ago

Message Not Public

Gaming

Programming

how to use from or reconcile with an external producer