Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/DamianOsipiuk/vue-query
Hooks for fetching, caching and updating asynchronous data in Vue
https://github.com/DamianOsipiuk/vue-query
async cache fetch graphql hooks query rest stale stale-while-revalidate vue
Last synced: 2 months ago
JSON representation
Hooks for fetching, caching and updating asynchronous data in Vue
- Host: GitHub
- URL: https://github.com/DamianOsipiuk/vue-query
- Owner: DamianOsipiuk
- License: mit
- Created: 2021-02-05T15:13:23.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2023-06-27T14:28:26.000Z (over 1 year ago)
- Last Synced: 2024-11-16T12:47:34.860Z (2 months ago)
- Topics: async, cache, fetch, graphql, hooks, query, rest, stale, stale-while-revalidate, vue
- Language: TypeScript
- Homepage: https://vue-query.vercel.app/
- Size: 1.76 MB
- Stars: 1,110
- Watchers: 8
- Forks: 48
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
[](https://damianosipiuk.github.io/vue-query/)
[](https://www.npmjs.com/package/vue-query)
[](https://github.com/DamianOsipiuk/vue-query/blob/main/LICENSE)
[](https://bundlephobia.com/result?p=vue-query)
[](https://www.npmjs.com/package/vue-query)
[](https://github.com/DamianOsipiuk/vue-query/actions/workflows/ci.yml?query=branch%3Amain)
[](https://codecov.io/gh/DamianOsipiuk/vue-query)
# :warning: Package migration :warning:
This package was migrated to be a part of https://github.com/TanStack/query.
If you are still on `v1` make sure to follow [migration guide](https://vue-query-next.vercel.app/#/guides/migrating-to-vue-query-2) first and then switch to `@tanstack/vue-query`.
If you are already on `v2`, just swap `vue-query` for `@tanstack/vue-query` in both of your `package.json` and `import` statements. Everything should still work as before.
# Vue Query
Hooks for fetching, caching and updating asynchronous data in Vue.
Support for Vue 2.x via [vue-demi](https://github.com/vueuse/vue-demi)
Based on [react-query](https://github.com/tannerlinsley/react-query)
# Documentation
Visit https://vue-query.vercel.app
Visit https://vue-query-next.vercel.app for V2 documentation
For topics not covered in `vue-query docs` visit [react-query docs](https://react-query.tanstack.com/reference/useQuery) as most of the concepts and APIs are the same.
# Quick Features
- Transport/protocol/backend agnostic data fetching (REST, GraphQL, promises, whatever!)
- Auto Caching + Refetching (stale-while-revalidate, Window Refocus, Polling/Realtime)
- Parallel + Dependent Queries
- Mutations + Reactive Query Refetching
- Multi-layer Cache + Automatic Garbage Collection
- Paginated + Cursor-based Queries
- Load-More + Infinite Scroll Queries w/ Scroll Recovery
- Request Cancellation
- (experimental) [Suspense](https://v3.vuejs.org/guide/migration/suspense.html#introduction) + Fetch-As-You-Render Query Prefetching
- (experimental) SSR support
- Dedicated Devtools
- [](https://bundlephobia.com/result?p=vue-query) (depending on features imported)
# Quick Start
1. Install `vue-query`
```bash
npm install vue-query
# or
yarn add vue-query
```
> If you are using Vue 2.x, make sure to also setup [@vue/composition-api](https://github.com/vuejs/composition-api)
2. Initialize **Vue Query** via **VueQueryPlugin**
```ts
import { createApp } from "vue";
import { VueQueryPlugin } from "vue-query";
import App from "./App.vue";
createApp(App).use(VueQueryPlugin).mount("#app");
```
3. Use query
```ts
import { defineComponent } from "vue";
import { useQuery } from "vue-query";
export default defineComponent({
name: "MyComponent",
setup() {
const query = useQuery("todos", getTodos);
return {
query,
};
},
});
```
4. If you need to update options on your query dynamically, make sure to pass them as reactive variables
```ts
const id = ref(1);
const enabled = ref(false);
const query = useQuery(["todos", id], () => getTodos(id), { enabled });
```