Skip to content

Commit ab7c021

Browse files
committed
Breaking api change -> use only watchQuery
1 parent 7f8fc7a commit ab7c021

File tree

3 files changed

+118
-164
lines changed

3 files changed

+118
-164
lines changed

README.md

Lines changed: 91 additions & 117 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ import Vue from 'vue';
1818
import ApolloClient, { createNetworkInterface, addTypename } from './apollo-client';
1919
import VueApollo from 'vue-apollo';
2020

21+
// Create the apollo client
2122
const apolloClient = new ApolloClient({
2223
networkInterface: createNetworkInterface({
2324
uri: 'http://localhost:8080/graphql',
@@ -26,6 +27,7 @@ const apolloClient = new ApolloClient({
2627
queryTransformer: addTypename,
2728
});
2829

30+
// Install the vue plugin
2931
Vue.use(VueApollo, {
3032
apolloClient,
3133
});
@@ -47,7 +49,7 @@ You can access the [apollo-client](http://dev.apollodata.com/core/apollo-client-
4749

4850
### Queries
4951

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.
5153

5254
#### Simple query
5355

@@ -61,11 +63,8 @@ Put the [gql](http://docs.apollostack.com/apollo-client/core.html#gql) query dir
6163

6264
```javascript
6365
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}`,
6968
},
7069
```
7170

@@ -133,46 +132,43 @@ You can add variables (read parameters) to your `gql` query by declaring `query`
133132
```javascript
134133
// Apollo-specific options
135134
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',
148144
},
149145
},
150146
},
151147
```
152148

153-
You can use the apollo options in the object, like:
149+
You can use the apollo `watchQuery` options in the object, like:
154150
- `forceFetch`
155151
- `fragments`
152+
- `returnPartialData`
153+
- `pollInterval`
156154
- ...
157155

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.
159157

160158
For example, you could add the `forceFetch` apollo option like this:
161159

162160
```javascript
163161
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'
175169
},
170+
// Additional options here
171+
forceFetch: true,
176172
},
177173
},
178174
```
@@ -239,20 +235,17 @@ Use a function instead to make the parameters reactive with vue properties:
239235
```javascript
240236
// Apollo-specific options
241237
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+
};
256249
},
257250
},
258251
},
@@ -285,51 +278,48 @@ These are the available advanced options you can use:
285278
```javascript
286279
// Apollo-specific options
287280
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
333323
},
334324
},
335325
},
@@ -341,42 +331,26 @@ If you use `ES2015`, you can also write the `update` like this:
341331
update: data => data.ping
342332
```
343333

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
347335

348-
Add your queries in a `watchQuery` object instead of `data`:
336+
Here is a reactive query example using polling:
349337

350338
```javascript
351339
// Apollo-specific options
352340
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
365350
},
366351
},
367352
```
368353

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-
380354
Here is how the server-side looks like:
381355

382356
```javascript

0 commit comments

Comments
 (0)