You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
-[Pagination with `fetchMore`](#pagination-with-fetchmore)
22
21
23
22
## Installation
24
23
25
24
26
25
npm install --save vue-apollo apollo-client
27
26
28
-
## Usage
29
-
30
-
### Configuration
27
+
## Configuration
31
28
32
29
```javascript
33
30
importVuefrom'vue';
@@ -50,7 +47,7 @@ Vue.use(VueApollo, {
50
47
// Your Vue app is now Apollo-enabled!
51
48
```
52
49
53
-
###Usage in components
50
+
## Usage in components
54
51
55
52
To declare apollo queries in your Vue component, add an `apollo` object :
56
53
@@ -64,11 +61,11 @@ new Vue({
64
61
65
62
You can access the [apollo-client](http://dev.apollodata.com/core/apollo-client-api.html) instance with `this.$apollo.client` in all your vue components.
66
63
67
-
###Queries
64
+
## Queries
68
65
69
66
In the `apollo` object, add an attribute for each property you want to feed with the result of an Apollo query.
70
67
71
-
####Simple query
68
+
### Simple query
72
69
73
70
Use `gql` to write your GraphQL queries:
74
71
@@ -144,7 +141,7 @@ You can then use your property as usual in your vue component:
144
141
</template>
145
142
```
146
143
147
-
####Query with parameters
144
+
### Query with parameters
148
145
149
146
You can add variables (read parameters) to your `gql` query by declaring `query` and `variables` in an object:
150
147
@@ -247,7 +244,7 @@ And then use it in your vue component:
247
244
</template>
248
245
```
249
246
250
-
####Reactive parameters
247
+
### Reactive parameters
251
248
252
249
Use a function instead to make the parameters reactive with vue properties:
253
250
@@ -284,7 +281,7 @@ This will re-fetch the query each time a parameter changes, for example:
284
281
</template>
285
282
```
286
283
287
-
####Advanced options
284
+
### Advanced options
288
285
289
286
These are the available advanced options you can use:
290
287
-`update(data) {return ...}` to customize the value that is set in the vue property, for example if the field names don't match.
@@ -350,7 +347,7 @@ If you use `ES2015`, you can also write the `update` like this:
350
347
update:data=>data.ping
351
348
```
352
349
353
-
####Reactive Query Example
350
+
### Reactive Query Example
354
351
355
352
Here is a reactive query example using polling:
356
353
@@ -416,7 +413,7 @@ export const resolvers = {
416
413
};
417
414
```
418
415
419
-
###Mutations
416
+
## Mutations
420
417
421
418
Mutations are queries that changes your data state on your apollo server. For more info, visit the [apollo doc](http://dev.apollodata.com/core/apollo-client-api.html#ApolloClient\.mutate).
422
419
@@ -534,7 +531,7 @@ export const resolvers = {
534
531
};
535
532
```
536
533
537
-
###Subscriptions
534
+
## Subscriptions
538
535
539
536
To make enable the websocket-based subscription, a bit of additional setup is required:
540
537
@@ -650,7 +647,7 @@ You can then access the subscription `ObservableQuery` object with `this.$apollo
650
647
651
648
For the server implementation, you can take a look at [this simple example](https://github.com/Akryum/apollo-server-example).
0 commit comments