I currently have a query which fetches a list of the current existing projects, and I am using polling to keep this updated on a regular basis (every few seconds).
When a user creates/updates/deletes a project, I am using an optimisticResponse in the mutation to modify the local cache to reflect this UI change immediately for a snappy UI experience.
I’ve noticed that the optimisticResponse will not be reflected in the UI if the mutation occurs while the projects query is currently loading/pending (this is also mentioned in this topic). In this case, the cache modification occurs but the change is only shown in the UI after the query returns.
This issue is exacerbated by the polling - if the user has some amount of latency to the GraphQL server, the query can spend almost 50% of its time in the pending state, causing obvious delays to the UI updating.
I’ve created a demo sandbox which showcases the issue - it is even more obvious if you set your network throttling in the dev console to “Slow 3G” to highlight the effect of the latency. Pressing the button will sometimes react instantly while other times it will lag due to the pending query.
Is there a way that this can be circumvented and to make the query immediately display the updated cache value even while pending a network fetch?