Villus

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

☢️ Reactive

Write reactive queries/variables with the composition API

🚟 Suspense API

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

📚 Get Started

Sponsors

Thanks for the following companies and individuals who are supporting villus




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



Quick Start

First, install villus

yarn

shyarn add villus graphql

npm

shnpm install villus graphql --save

Usage

Configure the GraphQL client for your root component:

vue<script setup>
import { useClient } from 'villus';

useClient({
  url: 'http://localhost:3002/graphql',
});
</script>

Then you can use useQuery in any child component:

vue<template>
  <div>
    <div v-if="data">
      <pre>{{ data }}</pre>
    </div>
  </div>
</template>

<script setup>
import { useQuery } from 'villus';

const { data } = useQuery({
  query: '{ posts { title } }',
});
</script>