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

[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.

[github-actions[bot]]

Heads up @alicjasuska @umpox @valerybugakov @5h1ru @pdubroy - the "team/frontend-platform" label was applied to this issue.

[umpox]

@valerybugakov For the custom link + query option. It could be better to use the built-in context in this case

For example

useQuery(query, { context: { shouldPersist: true } )

and then in the Apollo link we can just call operation.getContext()

https://www.apollographql.com/docs/react/api/link/introduction/#managing-context

[valerybugakov]

Yeah, that's what I meant by the first option. Wrongly used options instead of context. Updating the description 👍