From 6ed496a89604286ed2158ff3c15f29b3baa0e721 Mon Sep 17 00:00:00 2001 From: Phil Hughes Date: Fri, 22 Feb 2019 12:54:06 +0000 Subject: Port design-management-vue-app to CE --- doc/development/fe_guide/graphql.md | 28 ++++++++++++++++++++++++++-- 1 file changed, 26 insertions(+), 2 deletions(-) (limited to 'doc') 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 -- cgit v1.2.3