A Fast GraphQL Client For Vue.js 3

In this post I am going to discuss about one of GitHub repositories a Fast GraphQL Client For Vue.js 3.

Villus:

A small and fast GraphQL client for Vue.js 3.x

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

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.

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 3 -->
<script src="https://unpkg.com/[email protected]/dist/vue.global.js"></script>
<!-- Villus -->
<script src="https://unpkg.com/[email protected]/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>