villus

A small and fast GraphQL client for Vue.js

⚡️ Fast

Small API footprint with tiny bundle size < 4kb to make your apps load faster

📦 Cache-Ready

Reasonable caching behavior out of the box which can be adjusted per query

👕 TypeScript

Written in TypeScript and supports Typed query Responses and variables

😋 Two Flavors

Available as composable functions (hooks) or higher-order components

☢️ Reactive

Write reactive queries/variables with the composition API

🚟 Suspense API

Supports the <Suspense /> component API out of the box

Sponsors

Thanks for the following companies and individuals who are supporting villus




You can also help this this project and my other projects by donating one time or by sponsoring via the following link



Quick Start

First install villus:

yarn add villus graphql

# or npm

npm install villus graphql --save

You can now use it with either the 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 { data } = useQuery({
      query: '{ posts { title } }',
    });

    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.