Skip to content

[ci-skip] WIP: Explore sharing a Vue Apollo cache on an issue page

Coung Ngo requested to merge cngo-issue-show-vue-apollo into master

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

Screen_Recording_2020-07-16_at_3.05.08_pm

Edited by Coung Ngo

Merge request reports