tinyplex / tinybase

The reactive data store for local‑first apps.
https://tinybase.org
MIT License
3.76k stars 80 forks source link

Getters return empty on first render #5

Closed kastriotkastrati closed 2 years ago

kastriotkastrati commented 2 years ago

Hello, thank you for your work, this is a really nice project and I am using it.

I want to report what seems to me as a bug. The getter methods return empty objects on first render instead of the expected behavior which is to return the storage content.

I am persisting to local storage and on the first render I would expect to get the saved data but I get an empty object. This only happens with the store methods, because when I manually check the local storage I can access the data.

To visualize this, here is some simple code which could serve for reproducing the bug as well.

useEffect(() => {
      const table = store.getTable('products');
      const table2 = localStorage.getItem('products/store');

      console.log(table); // returns empty { }
      console.log(table2); // returns data
}, [])

It works just fine on subsequent renders though and table returns the data normally then.

Thank you.

jamesgpearce commented 2 years ago

I'm assuming you're using a persister and loading it in somewhere else in the code. That is an async operation, so this is probably expected. (You may also consider using the useTable method that will force the re-render as soon as the store is loaded)

Could you share a little code to show how you have structured the store loading?

jamesgpearce commented 2 years ago

I'm going to close this as 'by design' - if this is an issue for any child components, I would recommend you do a check on the Store content before trying to render them.