@villus/batch NPM

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.
💚 Minimal Vue.js Components.
🖇 Composition API support.
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 serve a tiny client without all the bells and whistles attached to Apollo and its ecosystem, it offers simple strategies to cache and batch your GraphQL requests.

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 full documentation here

Quick Start

First install villus:

yarn add villus graphql

# or npm

npm install villus graphql --save

You can now use it with either the new Vue composition API or higher order components.

Composition API

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(AllPosts);

    return { data };
  },
};
</script>

There is also the higher-order component flavor if you prefer to use them instead. Check the docs for more examples and details.

You can do a lot more than that, villus makes frequent tasks such as re-fetching, caching, mutations, and subscriptions a breeze. It has even built-in Suspense support with Vue 3! Consult the documentation for more use-cases and examples.