File tree Expand file tree Collapse file tree 1 file changed +51
-0
lines changed Expand file tree Collapse file tree 1 file changed +51
-0
lines changed Original file line number Diff line number Diff 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
You can’t perform that action at this time.
0 commit comments