capacitor-community / sqlite

⚡Capacitor plugin for native & electron SQLite databases.
MIT License
495 stars 118 forks source link

WEB: Database gets reset to initial state on refresh (capv5, ionicv7) #425

Closed folsze closed 1 year ago

folsze commented 1 year ago

Describe the bug I am pretty sure this does not happen with capacitor version 4, with the older version of this plugin. I tested it in my real app and it all worked back in capv4 with this plugin. I am also pretty sure this only happens in the web version of this plugin.

On web after refreshing the data somehow gets reset to the state when the data was initially inserted (any updates made after the initial data was inserted are not kept). But not for the ionic-7-cap5-starter repo. Just for my code somehow. I created a minimal reproducible example with the ionic-5-capv5 repository. Here is the repo: https://github.com/folsze/cap-v5-breaks-after-reload

To Reproduce

  1. image

  2. image

  3. image

  4. go back into the page, see the changes now appear: image

  5. refresh the page
  6. see changes disappear: image

The insertion happens in the DepartmentEmployeesService, see createInitialData there

Expected behavior data receives the update & keeps after reload

Browser: Chrome Windows 11

jepiqueau commented 1 year ago

@folsze seems the autosave property of jeep-sqlite is not set to true meaning that the database which resides in memory is not save to the store meaning that when you do a refresh the database is read from the store which has not been updated. So you must call the saveToStore method after the insert or set the autosave property to true. I did not look in detail to your code as i do not have any idea on what you try to achieve.

folsze commented 1 year ago

Thank you. Adding this: jeepEl.autoSave = true;

Here, in main.ts: `if(platform === "web") { // Web platform // required for toast component in Browser pwaElements(window);

// required for jeep-sqlite Stencil component // to use a SQLite database in Browser jeepSqlite(window);

window.addEventListener('DOMContentLoaded', async () => { const jeepEl = document.createElement("jeep-sqlite"); document.body.appendChild(jeepEl); jeepEl.autoSave = true; }); }`

did fix it. Interesting that this was not necessary before I updated the plugin version to v5 (required with capacitor v5), but I think it might be due to a misconfiguration on my side earlier.