villus
Villus is a finger-like structures in the small intestine. They help to absorb digested food.
A small and fast GraphQL client for Vue.js.
This is forked from my previous work at vue-gql before they decide to go for a different direction with this library.
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 and Supports GraphQL TS toolingπ Composable: Built for the Composition APIβ‘οΈ Suspense: Supports the<Suspense>
API in Vue 3π Plugins: Use existing plugins and create custom ones- Higher-order components available
- Supports both Vue 2.x (with @vue/composition-api) and 3.0
Why use this
GraphQL is just a simple HTTP request. This library is meant to be a tiny client without all the bells and whistles attached to Apollo and its ecosystem which subsequently means it is faster across the board due to it's smaller bundle size and reduced overhead. villus
offers simple strategies to cache and batch, dedup your GraphQL requests.
villus
also supports file uploads and subscriptions without compromising bundle size through plugins.
If you are looking for a more full-featured client use vue-apollo, it has everything you need.
You can read more about it in the announcement post.
Documentation
You can find the documentation here
Quick Start
First install villus
:
yarn add villus graphql
# or npm
npm install villus graphql --save
Or because villus is so simple, you can use it via CDN:
<!-- Import Vue 2 or 3 -->
<script src="https://unpkg.com/vue@3.0.2/dist/vue.global.js"></script>
<!-- Vue Demi is needed for Vue 2 and 3 support -->
<script src="https://unpkg.com/vue-demi@0.4.1/lib/index.iife.js"></script>
<!-- Villus -->
<script src="https://unpkg.com/villus@latest/dist/villus.min.js"></script>
You can now use it with either the new Vue composition API or higher order components.
Usage
Configure the GraphQL client for your root component:
import { useClient } from 'villus';
export default {
name: 'App',
setup() {
useClient({
url: 'http://localhost:3002/graphql',
});
},
};
Then you can use useQuery
in any child component:
<template>
<div>
<div v-if="data">
<pre>{{ data }}</pre>
</div>
</div>
</template>
<script>
import { useQuery } from 'villus';
export default {
setup() {
const AllPosts = `
query AllPosts {
posts {
title
}
}
`;
const { data } = useQuery({
query: AllPosts,
});
return { data };
},
};
</script>
There is also the higher-order component flavor if you prefer to use them instead. Read the docs for more examples and details.
villus
makes frequent tasks such as re-fetching, caching, deduplication, mutations, and subscriptions a breeze. It has even built-in Suspense
support with Vue 3! 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
Live examples can be found here
License
MIT