Merge branch 'design-management-vue-app-ce' into 'master'

Port design-management-vue-app to CE

See merge request gitlab-org/gitlab-ce!25494

app/assets/javascripts/issuable_suggestions/index.js

 import Vue from 'vue';
 import VueApollo from 'vue-apollo';
-import defaultClient from '~/lib/graphql';
+import createDefaultClient from '~/lib/graphql';
 import App from './components/app.vue';
 
 Vue.use(VueApollo);
@@ -10,7 +10,7 @@ export default function() {
   const issueTitle = document.getElementById('issue_title');
   const { projectPath } = el.dataset;
   const apolloProvider = new VueApollo({
-    defaultClient,
+    defaultClient: createDefaultClient(),
   });
 
   return new Vue({

app/assets/javascripts/lib/graphql.js

 import ApolloClient from 'apollo-boost';
 import csrf from '~/lib/utils/csrf';
 
-export default new ApolloClient({
+export default (clientState = {}) =>
+  new ApolloClient({
     uri: `${gon.relative_url_root}/api/graphql`,
     headers: {
       [csrf.headerKey]: csrf.token,
     },
-});
+    clientState,
+  });

doc/development/fe_guide/graphql.md

@@ -27,11 +27,11 @@ the Vue application is mounted.
 ```javascript
 import Vue from 'vue';
 import VueApollo from 'vue-apollo';
-import defaultClient from '~/lib/graphql';
+import createDefaultClient from '~/lib/graphql';
 Vue.use(VueApollo);
 
 const apolloProvider = new VueApollo({
-  defaultClient,
+  defaultClient: createDefaultClient(),
 });
 
 new Vue({
@@ -43,6 +43,29 @@ new Vue({
 
 Read more about [Vue Apollo][vue-apollo] in the [Vue Apollo documentation][vue-apollo-docs].
 
+### Local state with `apollo-link-state`
+
+It is possible to use our Apollo setup with [apollo-link-state][apollo-link-state] by passing
+in the client state object when creating the default client.
+
+```javascript
+import Vue from 'vue';
+import VueApollo from 'vue-apollo';
+import createDefaultClient from '~/lib/graphql';
+Vue.use(VueApollo);
+
+const apolloProvider = new VueApollo({
+  defaultClient: createDefaultClient({
+    defaults: {
+      testing: true,
+    },
+    resolvers: {
+      ...
+    },
+  }),
+});
+```
+
 ### Testing
 
 With [Vue test utils][vue-test-utils] it is easy to quickly test components that
@@ -81,3 +104,4 @@ Read more about the [Apollo] client in the [Apollo documentation][apollo-client-
 [default-client]: https://gitlab.com/gitlab-org/gitlab-ce/blob/master/app/assets/javascripts/lib/graphql.js
 [apollo-client-docs]: https://www.apollographql.com/docs/tutorial/client.html
 [vue-test-utils]: https://vue-test-utils.vuejs.org/
+[apollo-link-state]: https://www.apollographql.com/docs/link/links/state.html