WARNING: This project is no longer maintained. We decided to migrate from Vue to Svelte. See minna-ui for our new web UI framework.

---

vue-graphql

Vue plugin for easy GraphQL requests

For the most part this is just a simple wrapper of graphql-request.

Usage

Install

yarn add vue-graphql

or

npm install vue-graphql

Add to your app

Typical use is to create a graphql.js file which installs the plugin. For example if you need an Authorization header with every request:

import Vue from 'vue';
import VueGraphQL from 'vue-graphql';

Vue.use(VueGraphQL);

const graphqlApi = 'https://your-api-endpoint.com/graphql'
const auth = 'REPLACE_WITH_YOUR_AUTH_TOKEN';

const client = new VueGraphQL.Client(graphqlApi, {
  headers: {
    Authorization: `Bearer ${auth}`,
  }
});

export default client;

Then import that file in your vue entrypoint, e.g. main.js:

import Vue from 'vue';
import graphql from './graphql';
import App from './App';

new Vue({
  el: '#app',
  graphql,
  render: h => h(App),
});

Use in vue components

The plugin will inject itself into the vue instance so you can call it with this.$graphql in vue components. A simplified example using async/await:

export default {
  data() {
    return {
      list: {},
    };
  },
  created() {
    this.getList();
  },
  methods: {
    async getList() {
      try {
        const res = await this.$graphql.request(`
          {
            myList {
              id
            }
          }
        `);
        this.list = res.myList;
      } catch (err) {
        // do something with the error
      }
    },
  },
};

For documentation about additional methods please see the graphql-request documentation.

To learn how to construct a GraphQL query see the official GraphQL documentation.

---

© 2017 We Are Genki