@@ -18,6 +18,7 @@ import Vue from 'vue';
18
18
import ApolloClient , { createNetworkInterface , addTypename } from ' ./apollo-client' ;
19
19
import VueApollo from ' vue-apollo' ;
20
20
21
+ // Create the apollo client
21
22
const apolloClient = new ApolloClient ({
22
23
networkInterface: createNetworkInterface ({
23
24
uri: ' http://localhost:8080/graphql' ,
@@ -26,6 +27,7 @@ const apolloClient = new ApolloClient({
26
27
queryTransformer: addTypename,
27
28
});
28
29
30
+ // Install the vue plugin
29
31
Vue .use (VueApollo, {
30
32
apolloClient,
31
33
});
@@ -47,7 +49,7 @@ You can access the [apollo-client](http://dev.apollodata.com/core/apollo-client-
47
49
48
50
### Queries
49
51
50
- In the ` query ` object, add an attribute for each property you want to feed with the result of an Apollo query.
52
+ In the ` apollo ` object, add an attribute for each property you want to feed with the result of an Apollo query.
51
53
52
54
#### Simple query
53
55
@@ -61,11 +63,8 @@ Put the [gql](http://docs.apollostack.com/apollo-client/core.html#gql) query dir
61
63
62
64
``` javascript
63
65
apollo: {
64
- // Non-reactive query
65
- query: {
66
- // Simple query that will update the 'hello' vue property
67
- hello: gql ` {hello }` ,
68
- },
66
+ // Simple query that will update the 'hello' vue property
67
+ hello: gql ` {hello }` ,
69
68
},
70
69
```
71
70
@@ -133,46 +132,43 @@ You can add variables (read parameters) to your `gql` query by declaring `query`
133
132
``` javascript
134
133
// Apollo-specific options
135
134
apollo: {
136
- // Non-reactive query
137
- query: {
138
- // Query with parameters
139
- ping: {
140
- // gql query
141
- query: gql ` query PingMessage ($message : String ! ) {
142
- ping (message : $message )
143
- }` ,
144
- // Static parameters
145
- variables: {
146
- message: ' Meow' ,
147
- },
135
+ // Query with parameters
136
+ ping: {
137
+ // gql query
138
+ query: gql ` query PingMessage ($message : String ! ) {
139
+ ping (message : $message )
140
+ }` ,
141
+ // Static parameters
142
+ variables: {
143
+ message: ' Meow' ,
148
144
},
149
145
},
150
146
},
151
147
```
152
148
153
- You can use the apollo options in the object, like:
149
+ You can use the apollo ` watchQuery ` options in the object, like:
154
150
- ` forceFetch `
155
151
- ` fragments `
152
+ - ` returnPartialData `
153
+ - ` pollInterval `
156
154
- ...
157
155
158
- See the [ apollo doc] ( http://dev.apollodata.com/core/apollo-client-api.html#ApolloClient\. query ) for more details.
156
+ See the [ apollo doc] ( http://dev.apollodata.com/core/apollo-client-api.html#ApolloClient\. watchQuery ) for more details.
159
157
160
158
For example, you could add the ` forceFetch ` apollo option like this:
161
159
162
160
``` javascript
163
161
apollo: {
164
- query: {
165
- // Query with parameters
166
- ping: {
167
- query: gql ` query PingMessage ($message : String ! ) {
168
- ping (message : $message )
169
- }` ,
170
- variables: {
171
- message: ' Meow'
172
- },
173
- // Additional options here
174
- forceFetch: true ,
162
+ // Query with parameters
163
+ ping: {
164
+ query: gql ` query PingMessage ($message : String ! ) {
165
+ ping (message : $message )
166
+ }` ,
167
+ variables: {
168
+ message: ' Meow'
175
169
},
170
+ // Additional options here
171
+ forceFetch: true ,
176
172
},
177
173
},
178
174
```
@@ -239,20 +235,17 @@ Use a function instead to make the parameters reactive with vue properties:
239
235
``` javascript
240
236
// Apollo-specific options
241
237
apollo: {
242
- // Non-reactive query
243
- query: {
244
- // Query with parameters
245
- ping: {
246
- query: gql ` query PingMessage ($message : String ! ) {
247
- ping (message : $message )
248
- }` ,
249
- // Reactive parameters
250
- variables () {
251
- // Use vue reactive properties here
252
- return {
253
- message: this .pingInput ,
254
- };
255
- },
238
+ // Query with parameters
239
+ ping: {
240
+ query: gql ` query PingMessage ($message : String ! ) {
241
+ ping (message : $message )
242
+ }` ,
243
+ // Reactive parameters
244
+ variables () {
245
+ // Use vue reactive properties here
246
+ return {
247
+ message: this .pingInput ,
248
+ };
256
249
},
257
250
},
258
251
},
@@ -285,51 +278,48 @@ These are the available advanced options you can use:
285
278
``` javascript
286
279
// Apollo-specific options
287
280
apollo: {
288
- // Non-reactive query
289
- query: {
290
- // Advanced query with parameters
291
- // The 'variables' method is watched by vue
292
- pingMessage: {
293
- query: gql ` query PingMessage ($message : String ! ) {
294
- ping (message : $message )
295
- }` ,
296
- // Reactive parameters
297
- variables () {
298
- // Use vue reactive properties here
299
- return {
300
- message: this .pingInput ,
301
- };
302
- },
303
- // We use a custom update callback because
304
- // the field names don't match
305
- // By default, the 'pingMessage' attribute
306
- // would be used on the 'data' result object
307
- // Here we know the result is in the 'ping' attribute
308
- // considering the way the apollo server works
309
- update (data ) {
310
- console .log (data);
311
- // The returned value will update
312
- // the vue property 'pingMessage'
313
- return data .ping ;
314
- },
315
- // Optional result hook
316
- result (data ) {
317
- console .log (" We got some result!" );
318
- },
319
- // Error handling
320
- error (error ) {
321
- console .error (' We\' ve got an error!' , error);
322
- },
323
- // Loading state
324
- // loadingKey is the name of the data property
325
- // that will be incremented when the query is loading
326
- // and decremented when it no longer is.
327
- loadingKey: ' loadingQueriesCount' ,
328
- // watchLoading will be called whenever the loading state changes
329
- watchLoading (isLoading , countModifier ) {
330
- // isLoading is a boolean
331
- // countModifier is either 1 or -1
332
- },
281
+ // Advanced query with parameters
282
+ // The 'variables' method is watched by vue
283
+ pingMessage: {
284
+ query: gql ` query PingMessage ($message : String ! ) {
285
+ ping (message : $message )
286
+ }` ,
287
+ // Reactive parameters
288
+ variables () {
289
+ // Use vue reactive properties here
290
+ return {
291
+ message: this .pingInput ,
292
+ };
293
+ },
294
+ // We use a custom update callback because
295
+ // the field names don't match
296
+ // By default, the 'pingMessage' attribute
297
+ // would be used on the 'data' result object
298
+ // Here we know the result is in the 'ping' attribute
299
+ // considering the way the apollo server works
300
+ update (data ) {
301
+ console .log (data);
302
+ // The returned value will update
303
+ // the vue property 'pingMessage'
304
+ return data .ping ;
305
+ },
306
+ // Optional result hook
307
+ result (data ) {
308
+ console .log (" We got some result!" );
309
+ },
310
+ // Error handling
311
+ error (error ) {
312
+ console .error (' We\' ve got an error!' , error);
313
+ },
314
+ // Loading state
315
+ // loadingKey is the name of the data property
316
+ // that will be incremented when the query is loading
317
+ // and decremented when it no longer is.
318
+ loadingKey: ' loadingQueriesCount' ,
319
+ // watchLoading will be called whenever the loading state changes
320
+ watchLoading (isLoading , countModifier ) {
321
+ // isLoading is a boolean
322
+ // countModifier is either 1 or -1
333
323
},
334
324
},
335
325
},
@@ -341,42 +331,26 @@ If you use `ES2015`, you can also write the `update` like this:
341
331
update : data => data .ping
342
332
```
343
333
344
- ### Reactive Queries
345
-
346
- For more info, see the [ apollo doc] ( http://dev.apollodata.com/core/apollo-client-api.html#ApolloClient\. watchQuery ) .
334
+ ### Reactive Query Example
347
335
348
- Add your queries in a ` watchQuery ` object instead of ` data ` :
336
+ Here is a reactive query example using polling :
349
337
350
338
``` javascript
351
339
// Apollo-specific options
352
340
apollo: {
353
- // Reactive query
354
- watchQuery: {
355
- // 'tags' data property on vue instance
356
- tags: {
357
- query: gql ` query tagList {
358
- tags {
359
- id ,
360
- label
361
- }
362
- }` ,
363
- pollInterval: 300 , // ms
364
- },
341
+ // 'tags' data property on vue instance
342
+ tags: {
343
+ query: gql ` query tagList {
344
+ tags {
345
+ id ,
346
+ label
347
+ }
348
+ }` ,
349
+ pollInterval: 300 , // ms
365
350
},
366
351
},
367
352
```
368
353
369
- You can use the apollo options, for example:
370
- - ` forceFetch `
371
- - ` returnPartialData `
372
- - ` pollInterval `
373
- - ` fragments `
374
- - ...
375
-
376
- See the [ apollo doc] ( http://dev.apollodata.com/core/apollo-client-api.html#ApolloClient\. watchQuery ) for more details.
377
-
378
- You can also use the advanced options detailed above, like ` result ` or ` watchLoading ` .
379
-
380
354
Here is how the server-side looks like:
381
355
382
356
``` javascript
0 commit comments