Skip to content

Move frontend caching from local storage to IndexedDB

Natalia Tepluhina requested to merge ntepluhina-introduce-indexeddb into master

What does this MR do and why?

This MR acts as a follow-up to !106004 (merged). Previously, we were caching data in the localStorage, this MR replaces localStorage with IndexedDB. On top of this, now we're storing GraphQL objects in their respective IndexedDB tables so we can access e.g. project directly by project id, without a need to read project query first.

Screenshots or screen recordings

No visual changes

How to set up and validate locally

  1. Enable the caching feature flag

    Feature.enable(:frontend_caching)
  2. Open the issues list of any project: http://127.0.0.1:3000/flightjs/Flight/-/issues

  3. Refresh the page. You shouldn't see a skeleton loader this time.

  4. Go to the second page of the issues and observe the skeleton loader.

  5. Refresh the page - no skeleton loader this time as the second page is cached.

  6. Create a new issue and open the first page of the issues list again.

  7. Initially, you should see an old list, and then a new issue should appear on top of it.

  8. Open devtools -> Application -> Storage -> IndexedDB

  9. You should see at least queries table with issues_list field

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

Edited by Natalia Tepluhina

Merge request reports