Coder Social home page Coder Social logo

logaretm / villus Goto Github PK

View Code? Open in Web Editor NEW
792.0 9.0 31.0 6.25 MB

๐ŸŽ A tiny and fast GraphQL client for Vue.js

Home Page: https://villus.dev

License: MIT License

JavaScript 6.37% Shell 0.23% TypeScript 93.40%
graphql-client vue composition-api apollo graphql api graphql-api graphql-apis hacktoberfest

villus's Introduction

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


You can also help this this project and my other projects by donating one time or by sponsoring.

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
  • ๐Ÿ”Œ Plugins: Use existing plugins and create custom ones

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.

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

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/villus@latest/dist/villus.min.js"></script>

Usage

Configure the GraphQL client for your root component:

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

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

Then you can use useQuery in any child component:

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

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

const AllPosts = `
  query AllPosts {
    posts {
      title
    }
  }
`;

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

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

Compatibility

This library relies on the fetch web API to run queries, you can use unfetch (client-side) or node-fetch (server-side) to use as a polyfill.

This library is compatible with Vue 3.0+ or 2.7+

Examples

Live examples can be found here

License

MIT

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.