solid-db rendering issues when not using key named `id`

[fehmer]

• I've validated the bug against the latest version of DB packages

Describe the bug
Using a queryCollection with items not having an id property causing problems on rendering.

To Reproduce
Steps to reproduce the behavior:

Full demo available at https://github.com/fehmer/tanstack-demo/blob/main/src/CollectionIssue.tsx

1. create a queryCollection with items of type {_id:string, name:string}
2. create a live query based on this collection, use orderBy to order by name
3. display the content of the collection using <For each={query()}>
4. rename the last item with a name to be ordered on the top
5. notice all items are shown with name Alvin

Collection definition:

const collection = createCollection(
  queryCollectionOptions({
    queryKey: ["collection"],
    queryClient,
    getKey: (it) => it._id,
    queryFn: async () => {
      return [
        { name: "Bob", _id: "bob1" },
        { name: "Kevin", _id: "kevin1" },
        { name: "Stuart", _id: "stuart1" },
      ] as Item[];
    },
  }),
);

Live query:

function useItemsLiveQuery() {
  return useLiveQuery((q) => {
    return q.from({ item: collection }).orderBy(({ item }) => item.name, "asc");
  });
}

Render:

export const CollectionIssue: Component = () => {
  const items = useItemsLiveQuery();
  const idItems = useIdItemsLiveQuery();
  return (
    <>
      <h2>Collection with _id</h2>
      <ol>
        <For each={items()}>{(item) => <li>{item.name}</li>}</For>
      </ol>

      <button
        onClick={() => {
          void updateName({ _id: "stuart1", name: "Alvin" });
        }}
      >
        rename stuart
      </button>
    </>
  );
};



const updateName = createOptimisticAction<Item>({
  onMutate: ({ _id, name }) => {
    collection.update(_id, (tag) => {
      tag.name = name;
    });
  },
  mutationFn: async ({ _id, name }) => {
    collection.utils.writeUpdate({ _id, name });
  },
});

It does work fine in case the Item has a property called id without underscore.

Screenshots
before rename

after rename

Desktop (please complete the following information):

• OS: macos
• Browser chrome
• Version 148

[fehmer]

I implemented the same example as react application using @tanstack/react-db and it does work without issues.

https://github.com/fehmer/tanstack-react/blob/main/src/routes/index.tsx