I'm trying to load a model on button click. Component does not update after loading model

[Qsppl]

I'm trying to load a model on button click.
I created a component with no ID storage as per the documentation.
After assigning an ID to a property, the repository loads models, but the component is not updated.

example on Pen: https://codepen.io/qsppl/pen/PoXvVxW?editors=1010

[smalluban]

Thanks for creating an issue. It might be related to a bug (or the browser's change behavior of the Set iterators) in the internal cache mechanism.

I'll try to check it out ASAP.

[smalluban]

EDIT: https://codesandbox.io/s/hybrids-web-components-playground-forked-d2pcgl?file=/src/index.js

One tip about your example - if you use store factory and get posts in render, the store will try to fetch the list without id too. It must do this, as for listings it cannot assume that without id you don't want to fetch anything (like for a model instance, which requires id).

In the above codesandbox I made a slight change to your list method, so if id is falsy, it just returns an empty array. It then protects the case store.get([Post]) - you can alternatively throw an error if id does not fit your needs. Then, you can use store.error() in the render method to show that case.

[smalluban]

@Qsppl Please try v8.2.5. If the problem still occurs please re-open the issue.

[Qsppl]

EDIT: https://codesandbox.io/s/hybrids-web-components-playground-forked-d2pcgl?file=/src/index.js

One tip about your example - if you use store factory and get posts in render, the store will try to fetch the list without id too. It must do this, as for listings it cannot assume that without id you don't want to fetch anything (like for a model instance, which requires id).

In the above codesandbox I made a slight change to your list method, so if id is falsy, it just returns an empty array. It then protects the case store.get([Post]) - you can alternatively throw an error if id does not fit your needs. Then, you can use store.error() in the render method to show that case.

In this case, it is impossible to distinguish between cases when we have not yet downloaded the data and when we have already downloaded the data and an empty array was actually returned from the server.

Also, the store.ready defender no longer means that the data download is complete.

I opened a issue on this topic before I saw your message:
#216

[Qsppl]

EDIT: https://codesandbox.io/s/hybrids-web-components-playground-forked-d2pcgl?file=/src/index.js
One tip about your example - if you use store factory and get posts in render, the store will try to fetch the list without id too. It must do this, as for listings it cannot assume that without id you don't want to fetch anything (like for a model instance, which requires id).
In the above codesandbox I made a slight change to your list method, so if id is falsy, it just returns an empty array. It then protects the case store.get([Post]) - you can alternatively throw an error if id does not fit your needs. Then, you can use store.error() in the render method to show that case.

In this case, it is impossible to distinguish between cases when we have not yet downloaded the data and when we have already downloaded the data and an empty array was actually returned from the server.

Also, the store.ready defender no longer means that the data download is complete.

I opened a issue on this topic before I saw your message: #216

I'll try to load not the component model when clicked, but the entire component, like in Vue. This solution should create fewer problems.