[ci-skip] WIP: Explore sharing a Vue Apollo cache on an issue page
Problem
- The issue page is a Haml page with ~17 independently mounted Vue root components
- There is no shared state, meaning an update to one root component may not be reflected on the rest of the page therefore causing inconsistent UI state
What do the code changes in this MR do?
- Creates a single Vue Apollo provider in the issue page
index.js
- This Apollo provider is passed to 2 Vue root components that are independently mounted (i.e. are not connected to one another in a parent/child relationship)
- The 3 Vue components can update the Apollo cache, which is then reflected on the UI
- Although the 3 components make the same GraphQL query call on mount, only 1 network call is made (if the Apollo provider is not shared, the 2 components make 2 separate network calls)
Questions
- In our codebase, we create Vuex stores and Apollo providers at the level of the Vue root component, not at the level of the index.js of the web page. Is there anything problematic with creating an Apollo provider at the index.js level?
Screenshots
Edited by Coung Ngo