Port design-management-vue-app to CE

3 files changed, 36 insertions, 10 deletions

diff --git a/app/assets/javascripts/issuable_suggestions/index.js b/app/assets/javascripts/issuable_suggestions/index.js
index 2c80cf1797a..40916c9d27f 100644
--- a/app/assets/javascripts/issuable_suggestions/index.js
+++ b/app/assets/javascripts/issuable_suggestions/index.js
@@ -1,6 +1,6 @@
 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({
diff --git a/app/assets/javascripts/lib/graphql.js b/app/assets/javascripts/lib/graphql.js
index 20a0f142d9e..64e4e899f44 100644
--- a/app/assets/javascripts/lib/graphql.js
+++ b/app/assets/javascripts/lib/graphql.js
@@ -1,9 +1,11 @@
 import ApolloClient from 'apollo-boost';
 import csrf from '~/lib/utils/csrf';
 
-export default new ApolloClient({
-  uri: `${gon.relative_url_root}/api/graphql`,
-  headers: {
-    [csrf.headerKey]: csrf.token,
-  },
-});
+export default (clientState = {}) =>
+  new ApolloClient({
+    uri: `${gon.relative_url_root}/api/graphql`,
+    headers: {
+      [csrf.headerKey]: csrf.token,
+    },
+    clientState,
+  });
diff --git a/doc/development/fe_guide/graphql.md b/doc/development/fe_guide/graphql.md
index f55f01720fd..cb535a8ec5b 100644
--- a/doc/development/fe_guide/graphql.md
+++ b/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