State management

Both remote and local state are managed by Apollo Client. Apollo + Vue integration is provided by vue-apollo package via Vue CLI plugins. All the Apollo relevant configuration and data for both remote and local sides is located in src/state directory, including global queries and mutations.

Thanks to Apollo cache, a query performed to the server will be stored locally and won't fire extra requests by default. This is useful to provide, for example, the current user object in every view without waiting.

Apollo supports managing local state directly instead of including an extra store like Vuex. This means that, in order to access or update your local state, you use GraphQL queries and mutations just like you would for data from a server. Apollo's caching and offline persistence are also supported for local state out of the box. On top of that, Apollo DevTools are also compatible for debugging your store. Local state is stored in src/state in shape of resolvers and defaults.

However, note that in this project it's highly preferred to use the traditional props-down + events-up methodology for simplicity, unless for complex situations or where having global state across components makes sense.

To wrap your head around our state management, have a look first at Apollo Client introduction and then at Vue Apollo integration docs. Finally, read apollo-link-state docs for more information on local state management.