@@ -24,61 +24,63 @@ Each query declared in the `apollo` definition (that is, which doesn't start wit
2424Example:
2525
2626``` js
27+ export default {
2728// Apollo-specific options
28- apollo: {
29+ apollo: {
2930 // Advanced query with parameters
3031 // The 'variables' method is watched by vue
31- pingMessage: {
32- query: gql ` query PingMessage ($message : String ! ) {
32+ pingMessage: {
33+ query: gql ` query PingMessage ($message : String ! ) {
3334 ping (message : $message )
3435 }` ,
35- // Reactive parameters
36- variables () {
36+ // Reactive parameters
37+ variables () {
3738 // Use vue reactive properties here
38- return {
39- message: this .pingInput ,
40- }
41- },
42- // Polling interval in milliseconds
43- pollInterval: 10000 ,
44- // Or, set polling interval as a vue reactive property
45- pollInterval () {
46- return this .pollInterval ;
47- },
48- // Variables: deep object watch
49- deep: false ,
50- // We use a custom update callback because
51- // the field names don't match
52- // By default, the 'pingMessage' attribute
53- // would be used on the 'data' result object
54- // Here we know the result is in the 'ping' attribute
55- // considering the way the apollo server works
56- update (data ) {
57- console .log (data)
58- // The returned value will update
59- // the vue property 'pingMessage'
60- return data .ping
61- },
62- // Optional result hook
63- result ({ data, loading, networkStatus }) {
64- console .log (' We got some result!'
65- },
66- // Error handling
67- error (error ) {
68- console .error (' We\' ve got an error!'
69- },
70- // Loading state
71- // loadingKey is the name of the data property
72- // that will be incremented when the query is loading
73- // and decremented when it no longer is.
74- loadingKey: ' loadingQueriesCount'
75- // watchLoading will be called whenever the loading state changes
76- watchLoading (isLoading , countModifier ) {
39+ return {
40+ message: this .pingInput ,
41+ }
42+ },
43+ // Polling interval in milliseconds
44+ pollInterval: 10000 ,
45+ // Or, set polling interval as a vue reactive property
46+ pollInterval () {
47+ return this .pollInterval
48+ },
49+ // Variables: deep object watch
50+ deep: false ,
51+ // We use a custom update callback because
52+ // the field names don't match
53+ // By default, the 'pingMessage' attribute
54+ // would be used on the 'data' result object
55+ // Here we know the result is in the 'ping' attribute
56+ // considering the way the apollo server works
57+ update (data ) {
58+ console .log (data)
59+ // The returned value will update
60+ // the vue property 'pingMessage'
61+ return data .ping
62+ },
63+ // Optional result hook
64+ result ({ data, loading, networkStatus }) {
65+ console .log (' We got some result!'
66+ },
67+ // Error handling
68+ error (error ) {
69+ console .error (' We\' ve got an error!'
70+ },
71+ // Loading state
72+ // loadingKey is the name of the data property
73+ // that will be incremented when the query is loading
74+ // and decremented when it no longer is.
75+ loadingKey: ' loadingQueriesCount'
76+ // watchLoading will be called whenever the loading state changes
77+ watchLoading (isLoading , countModifier ) {
7778 // isLoading is a boolean
7879 // countModifier is either 1 or -1
80+ },
7981 },
8082 },
81- },
83+ }
8284```
8385
8486If you use ` ES2015 ` , you can also write the ` update ` like this:
@@ -90,14 +92,18 @@ update: data => data.ping
9092Manual mode example:
9193
9294``` js
93- {
94- query: gql ` ...`
95- manual: true ,
96- result ({ data, loading }) {
97- if (! loading) {
98- this .items = data .items
95+ export default {
96+ apollo: {
97+ myQuery: {
98+ query: gql ` ...`
99+ manual: true ,
100+ result ({ data, loading }) {
101+ if (! loading) {
102+ this .items = data .items
103+ }
104+ },
99105 }
100- },
106+ }
101107}
102108```
103109
0 commit comments