villus - GitLite

KO | EN

gitlite — search

#javascript #react #typescript #llm #golang #go #machine-learning #macos #nodejs #awesome #cli #vue #openai #open-source

villus

(★ 811)

🏎 A tiny and fast GraphQL client for Vue.js

파일 탐색기

최종 버전 다운로드 (.zip)

- config.json
- README.md
- config.yml
- - ci.yml
  - release.yml
- FUNDING.yml
- .gitignore
- commit-msg
- pre-commit
- - settings.json
  - types.d.ts
- - favicon.ico
  - loadTheme.js
  - logo.png
- - config.ts
  - env.d.ts
  - highlight.ts
  - light-theme.json
  - theme.json
- .gitignore
- astro.config.ts
- CHANGELOG.md
- package.json
- postcss.config.js
- tailwind.config.js
- tsconfig.json
- - CHANGELOG.md
  - package.json
- - CHANGELOG.md
  - package.json
- - README.md
- - CHANGELOG.md
  - LICENSE
  - package.json
  - README.md
- build.ts
- config.ts
- copy-mds.ts
- deploy-docs.sh
- generate-dts.ts
- info.ts
- tag-release.ts
.gitignore
.npmrc
CHANGELOG.md
commitlint.config.js
eslint.config.js
LICENSE
logo.png
package.json
pnpm-lock.yaml
pnpm-workspace.yaml
prettier.config.js
README.md
tsconfig.json
vitest.config.js

# 설치 가이드

1. 코드 내려받기

git clone https://github.com/logaretm/villus

깃허브에서 프로젝트 코드 전체를 내 컴퓨터로 내려받습니다.

cd villus

방금 내려받은 프로젝트 폴더 안으로 이동합니다.

2. Node.js

쉬움 추천

사전 준비물

Git GitHub에서 프로젝트 코드를 내려받으려면 필요합니다.
Node.js npm 명령어를 쓰려면 Node.js가 설치되어 있어야 합니다. LTS(장기지원) 버전을 추천합니다.

yarn add villus graphql

이 명령어를 터미널에 그대로 입력해 실행하세요.

npm install villus graphql --save

package.json에 명시된 라이브러리들을 내려받아 설치합니다.

<img src="https://img.shields.io/npm/v/villus.svg?label=&color=05bda8">

이 명령어를 터미널에 그대로 입력해 실행하세요.

<img src="https://img.shields.io/npm/dm/villus.svg?color=05bd6d&label=">

이 명령어를 터미널에 그대로 입력해 실행하세요.

✅ 명령어 실행 후 터미널에 나타나는 주소(보통 http://localhost:3000 형태)를 브라우저에서 열어보세요.

이 레포의 README에 적힌 실제 명령어를 그대로 가져왔습니다.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# villus

<p align="center">
  <img width="200" src="https://raw.githubusercontent.com/logaretm/villus/main/logo.png">
</p>

<p align="center">
  <a target="_blank" href="https://www.npmjs.com/package/villus">
    <img src="https://img.shields.io/npm/v/villus.svg?label=&color=05bda8">
  </a>
  <a target="_blank" href="https://npm-stat.com/charts.html?package=villus">
    <img src="https://img.shields.io/npm/dm/villus.svg?color=05bd6d&label=">
  </a>
  <a href="https://villus.dev/" target="_blank">
    <img src="https://img.shields.io/badge/-docs%20and%20demos-009f53">
  </a>
  <a href="https://github.com/sponsors/logaretm">
    <img src="https://img.shields.io/badge/-%E2%99%A5%20Sponsors-ec5cc6">
  </a>
</p>

<h6 align="center">Villus is a finger-like structures in the small intestine. They help to absorb digested food.</h6>

<p align="center">
A small and fast GraphQL client for **Vue.js**
</p>

<p align="center">
  <a href="https://github.com/sponsors/logaretm">
    <img src='https://sponsors.logaretm.com/sponsors.svg'>
  </a>
</p>

<br>

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](https://github.com/vuejs/vue-apollo), it has everything you need.

You can read more about it in the [announcement post](https://logaretm.com/blog/2020-01-11-announcing-villus/).

## Documentation

You can find the [documentation here](https://villus.dev/)

## Quick Start

First install `villus`:

```bash
yarn add villus graphql

# or npm

npm install villus graphql --save
```

Or because villus is so simple, you can use it via CDN:

```html

<script src="https://unpkg.com/vue@3.0.2/dist/vue.global.js"></script>

<script src="https://unpkg.com/villus@latest/dist/villus.min.js"></script>
```

### 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 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](https://villus.dev) for more use-cases and examples.

## Compatibility

This library relies on the `fetch` web API to run queries, you can use [`unfetch`](https://github.com/developit/unfetch) (client-side) or [`node-fetch`](https://www.npmjs.com/package/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](https://villus.dev/examples/basic-query)

## License

MIT