Skip to content

[POC] Caching issues list app with `apollo-cache-persist`

Natalia Tepluhina requested to merge ntepluhina-caching-labels-poc into master

What does this MR do and why?

This MR serves as a proof-of-concept for caching data on the frontend with apollo-cache-persist library.

Why?

We have some really slow queries that don't can't be significantly improved on the backend due to their complexity. For example, when we fetch labels available to a certain user, we iterate over all the projects and groups available to this user and accumulate the labels before sending a response to the frontend. As a result, for users with maintainer access to many projects, this query could take up to 6 seconds on GitLab.com.

This data is also not very dynamic by the nature - we don't delete all the labels every day and create a new list from scratch. So, the logical solution for this problem was to cache the responses on the frontend, show the cached data to the user on the initial request and perform an API call in the background to update cached data.

How?

For now, we cache the GraphQL responses with apollo-cache-persist library. To make it more selective, we need to decorate the queries we want to persist with @persist directive and __persist field for every single type we want to cache.

To prevent API errors from this unknown directive/fields, we've added PersistLink: it strips the fields from the request, sends the request to the API and then decorates a response with __persist fields back. These fields are used as a key for PersistenceMapper: if some entity has __persist: true, it's cached, otherwise, it's not.

Screenshots or screen recordings

caching

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. Make sure that assignees in the filtered search are not cached but labels are.

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