Skip to content

Commit a40049e

Browse files
authored
add vue example
1 parent a03e7de commit a40049e

File tree

1 file changed

+51
-0
lines changed

1 file changed

+51
-0
lines changed

README.md

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -450,6 +450,57 @@ fragment username_admin on AdminUser {
450450
}
451451
```
452452

453+
## Using with Vue.js
454+
455+
Create a `GraphQLProvider.js`.
456+
457+
```js
458+
import graphql from 'graphql.js';
459+
460+
/* eslint-disable no-underscore-dangle */
461+
export default {
462+
install(Vue, url, options) {
463+
Vue.mixin({
464+
created() {
465+
this._graph = graphql(url, options);
466+
},
467+
});
468+
Object.defineProperty(Vue.prototype, '$graph', {
469+
get() {
470+
return this._graph;
471+
},
472+
});
473+
},
474+
};
475+
```
476+
477+
And then you can use this with your Vue app:
478+
479+
```js
480+
import Vue from 'vue';
481+
import GraphQLProvider from './GraphQLProvider';
482+
483+
Vue.use(GraphQLProvider, 'http://localhost:3000/graphql', {
484+
headers: {
485+
// headers...
486+
},
487+
});
488+
489+
// ... in your Vue VM
490+
data() {
491+
return {
492+
hello: '',
493+
};
494+
},
495+
methods: {
496+
makeSomeQuery() {
497+
this.$graph.query(`{hello}`).then(response => {
498+
this.hello = response.hello;
499+
});
500+
},
501+
}
502+
```
503+
453504

454505
## Todo App Example
455506

0 commit comments

Comments
 (0)