Welcome to mirror list, hosted at ThFree Co, Russian Federation.

gitlab.com/gitlab-org/gitlab-foss.git - Unnamed repository; edit this file 'description' to name the repository.
summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat (limited to 'doc/development/fe_guide/graphql.md')
-rw-r--r--doc/development/fe_guide/graphql.md36
1 files changed, 25 insertions, 11 deletions
diff --git a/doc/development/fe_guide/graphql.md b/doc/development/fe_guide/graphql.md
index 3290f29530a..8e06aa5d173 100644
--- a/doc/development/fe_guide/graphql.md
+++ b/doc/development/fe_guide/graphql.md
@@ -43,10 +43,12 @@ new Vue({
Read more about [Vue Apollo][vue-apollo] in the [Vue Apollo documentation][vue-apollo-docs].
-### Local state with `apollo-link-state`
+### Local state with Apollo
+
+It is possible to manage an application state with Apollo by passing
+in a resolvers object when creating the default client. The default state can be set by writing
+to the cache after setting up the default client.
-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';
@@ -54,18 +56,28 @@ import VueApollo from 'vue-apollo';
import createDefaultClient from '~/lib/graphql';
Vue.use(VueApollo);
+const defaultClient = createDefaultClient({
+ Query: {
+ ...
+ },
+ Mutations: {
+ ...
+ },
+});
+
+defaultClient.cache.writeData({
+ data: {
+ isLoading: true,
+ },
+});
+
const apolloProvider = new VueApollo({
- defaultClient: createDefaultClient({
- defaults: {
- testing: true,
- },
- resolvers: {
- ...
- },
- }),
+ defaultClient,
});
```
+Read more about local state management with Apollo in the [Vue Apollo documentation](https://vue-apollo.netlify.com/guide/local-state.html#local-state).
+
### Testing
With [Vue test utils][vue-test-utils] it is easy to quickly test components that
@@ -82,6 +94,8 @@ it('tests apollo component', () => {
});
```
+Another possible way is testing queries with mocked GraphQL schema. Read more about this way in [Vue Apollo testing documentation](https://vue-apollo.netlify.com/guide/testing.html#tests-with-mocked-graqhql-schema)
+
## Usage outside of Vue
It is also possible to use GraphQL outside of Vue by directly importing