vue-gql
A small and fast GraphQL client for Vue.js.
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:
;;; // Your App Component const client = ; // Wrap your app component with the provider component.const AppWithGQL = ; ;
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