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
- create a queryCollection with items of type
{_id:string, name:string}
- create a live query based on this collection, use
orderBy to order by name
- display the content of the collection using
<For each={query()}>
- rename the last item with a name to be ordered on the top
- 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
Describe the bug
Using a queryCollection with items not having an
idproperty 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
{_id:string, name:string}orderByto order by name<For each={query()}>Collection definition:
Live query:
Render:
It does work fine in case the
Itemhas a property calledidwithout underscore.Screenshots
before rename
after rename
Desktop (please complete the following information):