Vue gql

A small and fast GraphQL client for Vue.js

Version: 0.2.3 Updated: 07/14/2019

By: logaretm License: MIT

Downloads Last 30 Days: 155

Install

npm i vue-gql
yarn add vue-gql

CDNs

bundle.run: https://bundle.run/vue-gql

jsDelivr: https://cdn.jsdelivr.net/npm/vue-gql

unpkg: https://unpkg.com/vue-gql

vue-gql

A small and fast GraphQL client for Vue.js.

codecov Build Status Bundle Size

Features

  • 📦 Minimal: Its all you need to query GQL APIs.
  • 🦐 Tiny: Very small footprint.
  • 🗄 Caching: Simple and convenient query caching by default.
  • 💪 TypeScript: Written in Typescript.
  • 💚 Minimal Vue.js Components.

Documentation

You can find the full documentation here

Quick Start

First install vue-gql:

yarn add vue-gql graphql

# or npm

npm install vue-gql graphql --save

Setup the GraphQL client/endpoint:

import Vue from 'vue';
import { withProvider, createClient } from 'vue-gql';
import App from './App.vue'; // Your App Component

const client = createClient({
  url: 'http://localhost:3002/graphql'
});

// Wrap your app component with the provider component.
const AppWithGQL = withProvider(App, client);

new Vue({
  render: h => h(AppWithGQL)
}).$mount('#app');

Now you can use the Query and Mutation components to run queries:

<template>
  <Query query="{ posts { title } }" v-slot="{ data, fetching }">
    <div v-if="fetching">Is Fetching ...</div>
    <div v-else>
      <pre>{{ data }}</pre>
    </div>
  </Query>
</template>

<script>
import { Query } from 'vue-gql';

export default {
  components: {
    Query
  }
};
</script>

You can do a lot more, vue-gql makes frequent tasks such as re-fetching, caching, mutation responses, error handling, subscriptions a breeze. Consult the documentation for more use-cases and examples.

Compatibility

This library relies on the fetch web API to run queries, you can use unfetch (client-side) or node-fetch (server-side) to use as a polyfill.

Examples

SOON

License

MIT

Categories: Vue js
Tags: