Commit 6ed496a8 authored by Phil Hughes's avatar Phil Hughes

Port design-management-vue-app to CE

parent 0152d6ff
import Vue from 'vue'; import Vue from 'vue';
import VueApollo from 'vue-apollo'; import VueApollo from 'vue-apollo';
import defaultClient from '~/lib/graphql'; import createDefaultClient from '~/lib/graphql';
import App from './components/app.vue'; import App from './components/app.vue';
Vue.use(VueApollo); Vue.use(VueApollo);
...@@ -10,7 +10,7 @@ export default function() { ...@@ -10,7 +10,7 @@ export default function() {
const issueTitle = document.getElementById('issue_title'); const issueTitle = document.getElementById('issue_title');
const { projectPath } = el.dataset; const { projectPath } = el.dataset;
const apolloProvider = new VueApollo({ const apolloProvider = new VueApollo({
defaultClient, defaultClient: createDefaultClient(),
}); });
return new Vue({ return new Vue({
......
import ApolloClient from 'apollo-boost'; import ApolloClient from 'apollo-boost';
import csrf from '~/lib/utils/csrf'; import csrf from '~/lib/utils/csrf';
export default new ApolloClient({ export default (clientState = {}) =>
uri: `${gon.relative_url_root}/api/graphql`, new ApolloClient({
headers: { uri: `${gon.relative_url_root}/api/graphql`,
[csrf.headerKey]: csrf.token, headers: {
}, [csrf.headerKey]: csrf.token,
}); },
clientState,
});
...@@ -27,11 +27,11 @@ the Vue application is mounted. ...@@ -27,11 +27,11 @@ the Vue application is mounted.
```javascript ```javascript
import Vue from 'vue'; import Vue from 'vue';
import VueApollo from 'vue-apollo'; import VueApollo from 'vue-apollo';
import defaultClient from '~/lib/graphql'; import createDefaultClient from '~/lib/graphql';
Vue.use(VueApollo); Vue.use(VueApollo);
const apolloProvider = new VueApollo({ const apolloProvider = new VueApollo({
defaultClient, defaultClient: createDefaultClient(),
}); });
new Vue({ new Vue({
...@@ -43,6 +43,29 @@ new Vue({ ...@@ -43,6 +43,29 @@ new Vue({
Read more about [Vue Apollo][vue-apollo] in the [Vue Apollo documentation][vue-apollo-docs]. 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 ### Testing
With [Vue test utils][vue-test-utils] it is easy to quickly test components that 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- ...@@ -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 [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 [apollo-client-docs]: https://www.apollographql.com/docs/tutorial/client.html
[vue-test-utils]: https://vue-test-utils.vuejs.org/ [vue-test-utils]: https://vue-test-utils.vuejs.org/
[apollo-link-state]: https://www.apollographql.com/docs/link/links/state.html
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment