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
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>