Merge branch 'design-management-vue-app-ce' into 'master'
Port design-management-vue-app to CE See merge request gitlab-org/gitlab-ce!25494
This commit is contained in:
commit
4f5bb0886e
3 changed files with 36 additions and 10 deletions
|
@ -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({
|
||||
|
|
|
@ -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,
|
||||
});
|
||||
|
|
|
@ -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
|
||||
|
|
Loading…
Reference in a new issue