Vue-gql
A small and fast GraphQL client for Vue.js
Declarative
Use minimal Vue.js components to work with GraphQL
Fast
A lightweight footprint.
Caching
Reasonable caching behavior out of the box.
TypeScript
Everything is written in TypeScript.
Quick Setup
install
# install with yarn
yarn add vue-gql graphql
# install with npm
npm install vue-gql graphql
Use
In your entry file, import the required modules:
import Vue from 'vue';
import { createClient, withProvider } from 'vue-gql';
import App from './App.vue';
const client = createClient({
url: '/graphql' // Your endpoint
});
// use this instead of your App
const AppWithClient = withProvider(App, client);
new Vue({
render: h => h(AppWithClient)
}).mount('#app');
Now you can use the Query component to run GQL queries:
<template>
<Query query="{ posts { id title } }" v-slot="{ data, execute }">
<div v-if="data">
<ul>
<li v-for="post in data.posts" :key="post.id">{{ post.title }}</li>
</ul>
<button @click="execute()"></button>
</div>
</Query>
</template>
<script>
import { Query } from 'vue-gql';
export default {
components: {
Query
}
};
</script>