Villus

A tiny and fast GraphQL client for Vue.js

VueGraphQL
logaretm/villusvillus.logaretm.com/villus

README

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.


You can also help this this project and my other projects by donating one time or by sponsoring.

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 `` API
- 🔌 Plugins: Use existing plugins and create custom ones

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:

  1. ``` sh
  2. yarn add villus graphql

  4. # or npm

  6. npm install villus graphql --save
  7. ```

Or because villus is so simple, you can use it via CDN:

  1. ``` html
  3. <script src="https://unpkg.com/vue@3.0.2/dist/vue.global.js"></script>
  4. <script src="https://unpkg.com/villus@latest/dist/villus.min.js"></script>
  5. ```

Usage


Configure the GraphQL client for your root component:

  1. ```vue
  2. <script setup>
  3. import { useClient } from 'villus';

  5. useClient({
  6.   url: 'http://localhost:3002/graphql',
  7. });
  8. </script>
  9. ```

Then you can use useQuery in any child component:

  1. ```vue
  2. <template>
  3.   <div>
  4.     <div v-if="data">
  5.       <pre>{{ data }}</pre>
  6.     </div>
  7.   </div>
  8. </template>
  9. <script setup>
  10. import { useQuery } from 'villus';

  12. const AllPosts = `
  13.   query AllPosts {
  14.     posts {
  15.       title
  16.     }
  17.   }
  18. `;

  20. const { data } = useQuery({
  21.   query: AllPosts,
  22. });
  23. </script>
  24. ```

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](https://github.com/developit/unfetch) (client-side) or [node-fetch](https://www.npmjs.com/package/node-fetch) (server-side) to use as a polyfill.

This library is compatible with Vue 3.0+ or 2.7+

Examples


Live examples can be found here

License


MIT