Skip to content

Implement a scalable way to enable GraphQL query persistence on the client

Created by: valerybugakov

Problem

#23351 added a local storage persistence layer for Apollo-Client cache. Query names to persist are hardcoded for now.

Solution

Custom Apollo link + query option

A custom Apollo link needs to be implemented that will check if a specific option (e.g., useQuery(query, { context: { shouldPersist: true } })) is passed along with the GraphQL query. Based on this option a persistor should be applied to the query response.

Custom GraphQL directive

It can be improved by adding a custom GraphQL directive to the query which we want to persist, e.g., query ViewerSettings { settings @persist { ... } }. To process this directive on the client, a custom Apollo link needs to be implemented. It will

  • strip this directive from the GraphQL query that goes to the API
  • apply a persistor to the query response if the directive were present in the initial query.

The first option is preferred because it doesn't involve GraphQL query parsing logic.