# vue-react-query

> Vue bindings for react-query

Latest version **0.4.0** (published 2021-04-16) · MIT license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install vue-react-query
pnpm add vue-react-query
yarn add vue-react-query
bun add vue-react-query
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 0.4.0 |
| Published | 2021-04-16 |
| First published | 2021-02-07 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 464.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1111 |
| Author | Damian Osipiuk |
| Maintainers | mrmentor, damianosipiuk |
| Keywords | vue, query, react-query, vue-query, vue-react-query, server-cache |

## Links

- npm: https://www.npmjs.com/package/vue-react-query
- Repository: https://github.com/DamianOsipiuk/vue-query
- Homepage: https://github.com/DamianOsipiuk/vue-query#readme
- Issues: https://github.com/DamianOsipiuk/vue-query/issues
- npm.io page: https://npm.io/package/vue-react-query

## Dependencies (3)

- [vue-demi](https://npm.io/package/vue-demi.md) ^0.7.4
- [react-query](https://npm.io/package/react-query.md) ^3.13.9
- [match-sorter](https://npm.io/package/match-sorter.md) ^6.3.0

## Alternatives

- [gamedig](https://npm.io/package/gamedig.md) — 29.3K weekly downloads
- [join-monster](https://npm.io/package/join-monster.md) — 12.8K weekly downloads
- [masked](https://npm.io/package/masked.md) — 5.5K weekly downloads
- [@comunica/actor-query-process-explain-logical](https://npm.io/package/@comunica/actor-query-process-explain-logical.md) — 4.7K weekly downloads
- [@veracity/vui](https://npm.io/package/@veracity/vui.md) — 4.6K weekly downloads

## Recent versions

- 0.4.0 (latest) — 2021-04-16
- 0.3.3 — 2021-04-16
- 0.3.2 — 2021-04-16
- 0.3.1 — 2021-04-11
- 0.3.0 — 2021-04-11
- 0.2.0 — 2021-03-17
- 0.1.5 — 2021-03-05
- 0.1.4 — 2021-03-02
- 0.1.3 — 2021-02-21
- 0.1.2 — 2021-02-14
- 0.1.1 — 2021-02-12
- 0.1.0 — 2021-02-07

## README

[![NPM](https://img.shields.io/npm/v/vue-react-query)](https://www.npmjs.com/package/vue-react-query) [![NPM](https://img.shields.io/npm/l/vue-react-query)](https://github.com/DamianOsipiuk/vue-react-query/blob/main/LICENSE)

# vue-react-query

Hooks for fetching, caching and updating asynchronous data in Vue.

These hooks support Vue 2.x too via [vue-demi](https://github.com/vueuse/vue-demi)

Based on [react-query](https://github.com/tannerlinsley/react-query)

# 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
- Dedicated Devtools
- [![npm bundle size](https://img.shields.io/bundlephobia/minzip/vue-react-query)](https://bundlephobia.com/result?p=vue-react-query) (depending on features imported)

# Examples

- 3.x
  - [Basic](https://github.com/DamianOsipiuk/vue-react-query/tree/main/examples/basic)
  - [Multi-Page](https://github.com/DamianOsipiuk/vue-react-query/tree/main/examples/multi-page)
    - Caching - throttle network and then switch between pages
    - Deduping requests - click `change page` in quick succession and monitor Network tab in devtools.
    - Garbage collection - click `remove page`
- 2.x
  - [Basic](https://github.com/DamianOsipiuk/vue-react-query/tree/main/examples/basic-vue2.x)

# Installation

```
npm install vue-react-query
```

or

```
yarn add vue-react-query
```

# Usage

1. Attach vue-react-query to your Vue application

   ```
   import { createApp } from "vue";
   import { QueryClient, VUE_QUERY_CLIENT } from "vue-react-query";

   import App from "./App.vue";

   const queryClient = new QueryClient();
   queryClient.mount();

   createApp(App).provide(VUE_QUERY_CLIENT, queryClient).mount("#app");
   ```

2. Use query

   ```
   import { useQuery } from "vue-react-query";

   const query = useQuery("todos", getTodos);
   ```

3. If you need to update options on your query dynamically, make sure to pass it as reactive property

   ```
   const id = ref(1);
   const queryKey = reactive(["todos", { id }]);
   const queryFunction = () => getTodos(id),
   const options = reactive({
      staleTime: 60 * 60,
      onSuccess: () => {},
    });

   const query = useQuery(
     queryKey,
     queryFunction,
     options
   );
   ```

# DevTools

This package provides built-in devtools in the form of a Vue component.  
Use VueQueryDevTools component in the entry component of your application.

Check [Examples section](#examples).

**_Disclaimer: Devtools not supported on Vue 2.x_**

```
<script lang="ts">
import { defineComponent } from "vue";
import { VueQueryDevTools } from "vue-react-query/devtools";

export default defineComponent({
  name: "App",
  components: { VueQueryDevTools },
});
</script>

<template>
  <VueQueryDevTools />
</template>

```

---
_Source: https://npm.io/package/vue-react-query · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._